/* =========================
   AUTH BLACK WHITE THEME
========================= */


.auth-page {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#0f0f0f;

    padding:20;

}



.auth-card {

    width:560px;

    max-width:90vw;


    background:#171717;


    border:1px solid #333;


    border-radius:24px;


    padding:45px 50px;


    box-shadow:
    0 20px 60px rgba(0,0,0,.5);


}



.register-card{

    width:560px;

    max-width:90vw;

}




.auth-logo {


    width:70px;

    height:70px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;


    background:#111;

    color:white;


    border-radius:50%;

    font-size:36px;


}



.auth-card h1 {


    text-align:center;

    margin-top:20px;

    font-size:28px;

    font-weight:700;

    color:#111;

}



.auth-subtitle {


    text-align:center;

    color:#777;

    margin-bottom:30px;

}





.auth-group {


    margin-bottom:18px;

}



.auth-group label {


    font-size:14px;

    color:#ddd;

    margin-bottom:7px;

    display:block;


}





.auth-group input {

    width:100%;

    height:45px;

    padding:0 15px;

    border-radius:10px;

    border:1px solid #444;

    background:#222;

    color:#fff !important;

    -webkit-text-fill-color:#fff !important;

    caret-color:#fff !important;

    transition:.2s;

}

.auth-group input::placeholder {

    color:#888 !important;

    -webkit-text-fill-color:#888 !important;

    opacity:1;

}

.auth-group input:focus {


    border-color:#111;

    background:#fff;

    outline:none;


}




.auth-btn {


    width:100%;


    height:48px;


    border:none;


    border-radius:10px;


    background:#111;


    color:white;


    font-size:16px;


    font-weight:600;


    cursor:pointer;


    transition:.2s;


}



.auth-btn:hover {


    background:#333;


}




.guest-btn {

    display:flex;

    align-items:center;

    justify-content:center;


    height:45px;


    border-radius:10px;


    border:1px solid #444;


    background:#222;


    color:#fff;


    text-decoration:none;


    font-weight:500;

}


.guest-btn:hover {

    background:#333;

    color:#fff;

}




.auth-link {

    display:block;

    text-align:center;

    margin-top:20px;

    color:#fff;

    text-decoration:none;

}


.auth-link:hover {

    color:#aaa;

    text-decoration:underline;

}




.auth-divider {


    text-align:center;


    margin:20px 0;


    color:#999;


}




.auth-alert {


    background:#111;


    color:white;


    padding:12px;


    border-radius:10px;


    margin-bottom:15px;


}

.auth-card-footer {

    margin-top:30px;

    padding-top:20px;

    border-top:1px solid #333;


    text-align:center;

    color:#777;

    font-size:13px;

}

.brand-auth {

    text-align:center;

    margin-top:20px;

    margin-bottom:30px;

}


.brand-name-auth {

    color:white;

    font-size:32px;

    font-weight:800;

    letter-spacing:1px;

}



.brand-sub-auth {

    color:#888;

    font-size:14px;

    margin-top:4px;

    letter-spacing:2px;

}

.auth-card h2 {

    text-align:center;

    color:#ffffff;

    font-size:26px;

    font-weight:700;

    letter-spacing:.5px;

    margin:20px 0 30px;

}

html,
body {

    min-height:100%;

}


body {

    min-height:100vh;

    background:#0f0f0f;

}


.auth-wrapper {

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}



/* =====================================================
   FORCE AUTH INPUT TEXT COLOR
===================================================== */

.auth-page .auth-group input,
.auth-page .auth-group input[type="text"],
.auth-page .auth-group input[type="email"],
.auth-page .auth-group input[type="password"] {
    background: #222222 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    caret-color: #ffffff !important;
}


/* ตอน Focus / กำลังพิมพ์ */

.auth-page .auth-group input:focus,
.auth-page .auth-group input[type="text"]:focus,
.auth-page .auth-group input[type="email"]:focus,
.auth-page .auth-group input[type="password"]:focus {
    background: #ffffff !important;

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    caret-color: #111111 !important;

    border-color: #555555 !important;
    outline: none !important;
}


/* Placeholder */

.auth-page .auth-group input::placeholder {
    color: #888888 !important;
    -webkit-text-fill-color: #888888 !important;
    opacity: 1 !important;
}


/* =====================================================
   Chrome Autofill
===================================================== */

.auth-page .auth-group input:-webkit-autofill,
.auth-page .auth-group input:-webkit-autofill:hover,
.auth-page .auth-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111111 !important;

    -webkit-box-shadow:
        0 0 0 1000px #ffffff inset !important;

    box-shadow:
        0 0 0 1000px #ffffff inset !important;
}