/* ==========================================================================
   mGcHuman - LOGIN
   Page-specific stylesheet

   MASTER BUTTONS:
   buttons.css
   ========================================================================== */


/* ==========================================================================
   GLOBAL
   ========================================================================== */

* {
    box-sizing:
        border-box;
}


html {

    min-height:
        100%;

    background:
        #080a09;
}


body.login-page {

    margin:
        0;

    min-height:
        100vh;

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

    background:
        radial-gradient(
            circle at top,
            #101613 0,
            #080a09 45%,
            #050605 100%
        );

    color:
        #e4e8e5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;
}


a {

    text-decoration:
        none;

    color:
        inherit;
}


button,
input,
select,
textarea {

    font-family:
        inherit;
}


/* ==========================================================================
   LOGIN WRAPPER
   ========================================================================== */

.login-wrapper {

    width:
        100%;

    max-width:
        460px;

    margin:
        0 auto;
}


/* ==========================================================================
   LOGIN BRAND
   ========================================================================== */

.login-brand {

    width:
        100%;

    margin:
        0 auto 22px;

    text-align:
        center;
}


.login-brand h1 {

    margin:
        0;

    color:
        #00e676;

    font-size:
        34px;

    font-weight:
        700;

    letter-spacing:
        1px;

    line-height:
        1.1;

    text-align:
        center;

    text-shadow:
        0 0 15px
        rgba(
            0,
            230,
            118,
            .12
        );
}


.login-brand p {

    margin:
        8px 0 0;

    padding:
        0;

    color:
        #7f8983;

    font-size:
        12px;

    line-height:
        1.4;

    text-align:
        center;
}


/* ==========================================================================
   LOGIN CARD
   ========================================================================== */

.login-card {

    width:
        100%;

    background:
        linear-gradient(
            145deg,
            #111513,
            #0d100f
        );

    border:
        1px solid #252b28;

    border-radius:
        14px;

    padding:
        28px;

    box-shadow:
        0 18px 55px
        rgba(
            0,
            0,
            0,
            .35
        );
}


.login-card h2 {

    margin:
        0 0 8px;

    color:
        #f1f3f2;

    font-size:
        22px;

    line-height:
        1.2;
}


.description {

    color:
        #7f8983;

    font-size:
        12px;

    line-height:
        1.6;

    margin:
        0 0 22px;
}


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

.message {

    padding:
        13px 15px;

    border-radius:
        8px;

    margin:
        0 0 18px;

    font-size:
        12px;

    line-height:
        1.5;
}


.message.error {

    background:
        #261111;

    border:
        1px solid #7d2929;

    color:
        #ff9999;

    overflow-wrap:
        anywhere;
}


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

.form-group {

    margin-bottom:
        17px;
}


.login-card label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #aeb7b2;

    font-size:
        12px;

    font-weight:
        600;
}


.login-card input[type="text"],
.login-card input[type="password"] {

    width:
        100%;

    min-height:
        42px;

    padding:
        10px 12px;

    background:
        #080b09;

    border:
        1px solid #303733;

    border-radius:
        8px;

    color:
        #e6ebe8;

    font-size:
        13px;

    outline:
        none;

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


.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {

    border-color:
        #00a844;

    box-shadow:
        0 0 0 2px
        rgba(
            0,
            200,
            83,
            .08
        );
}


.login-card input::placeholder {

    color:
        #59625d;
}


/* ==========================================================================
   LOGIN BUTTON
   Master visual style comes from buttons.css.
   Only page-specific sizing is defined here.
   ========================================================================== */

.login-submit {

    width:
        100%;

    min-height:
        44px;

    margin-top:
        4px;
}


/* ==========================================================================
   REGISTER
   ========================================================================== */

.register {

    margin-top:
        22px;

    padding-top:
        20px;

    border-top:
        1px solid #252b28;

    color:
        #737d77;

    font-size:
        12px;

    text-align:
        center;

    line-height:
        1.5;
}


.register a {

    color:
        #69f0ae;

    font-weight:
        600;
}


.register a:hover {

    color:
        #9affba;

    text-decoration:
        underline;
}


/* ==========================================================================
   BACK BUTTON
   Master button style comes from buttons.css.
   ========================================================================== */

.back-wrapper {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        18px;
}


.back-btn {

    min-width:
        220px;
}


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

@media (max-width: 500px) {

    body.login-page {

        padding:
            14px;
    }


    .login-wrapper {

        max-width:
            100%;
    }


    .login-brand {

        margin-bottom:
            18px;
    }


    .login-brand h1 {

        font-size:
            29px;
    }


    .login-brand p {

        font-size:
            11px;
    }


    .login-card {

        padding:
            20px;
    }


    .login-card h2 {

        font-size:
            20px;
    }


    .description {

        font-size:
            11px;

        margin-bottom:
            20px;
    }


    .login-card label {

        font-size:
            11px;
    }


    .login-card input[type="text"],
    .login-card input[type="password"] {

        min-height:
            40px;

        padding:
            9px 11px;

        font-size:
            12px;
    }


    .login-submit {

        width:
            100%;
    }


    .back-btn {

        width:
            100%;

        min-width:
            0;
    }
}