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

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


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

* {
    box-sizing:
        border-box;
}


html {

    min-height:
        100%;

    background:
        #080a09;
}


body.register-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 {

    color:
        inherit;

    text-decoration:
        none;
}


button,
input,
select,
textarea {

    font-family:
        inherit;
}


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

.register-wrapper {

    width:
        100%;

    max-width:
        520px;

    margin:
        0 auto;
}


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

.register-brand {

    width:
        100%;

    margin:
        0 auto 22px;

    text-align:
        center;
}


.register-brand h1 {

    margin:
        0;

    color:
        #00e676;

    font-size:
        34px;

    font-weight:
        700;

    letter-spacing:
        1px;

    line-height:
        1.1;

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


.register-brand p {

    margin:
        8px 0 0;

    color:
        #7f8983;

    font-size:
        12px;

    line-height:
        1.4;
}


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

.register-card {

    width:
        100%;

    padding:
        28px;

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

    border:
        1px solid #252b28;

    border-radius:
        14px;

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


.register-card h2 {

    margin:
        0 0 8px;

    color:
        #f1f3f2;

    font-size:
        22px;

    line-height:
        1.2;
}


.description {

    margin:
        0 0 22px;

    color:
        #7f8983;

    font-size:
        12px;

    line-height:
        1.6;
}


/* ==========================================================================
   MESSAGES
   ========================================================================== */

.message {

    margin:
        0 0 18px;

    padding:
        13px 15px;

    border-radius:
        8px;

    font-size:
        12px;

    line-height:
        1.5;
}


.message.error {

    background:
        #261111;

    border:
        1px solid #7d2929;

    color:
        #ff9999;

    overflow-wrap:
        anywhere;
}


.message.success {

    background:
        #0d2115;

    border:
        1px solid #126a3b;

    color:
        #69f0ae;
}


.success-login-link {

    color:
        #69f0ae;

    font-weight:
        600;
}


.success-login-link:hover {

    color:
        #9affba;

    text-decoration:
        underline;
}


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

.form-group {

    margin:
        0 0 17px;
}


.form-group label {

    display:
        block;

    margin:
        0 0 7px;

    color:
        #aeb7b2;

    font-size:
        12px;

    font-weight:
        600;
}


.form-group input,
.form-group select {

    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;
}


.form-group input:focus,
.form-group select:focus {

    border-color:
        #00a844;

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


.form-group select {

    cursor:
        pointer;
}


.form-group input::placeholder {

    color:
        #59625d;
}


/* ==========================================================================
   PASSWORD / USERNAME HELP
   ========================================================================== */

.password-note {

    margin:
        6px 0 0;

    color:
        #626b66;

    font-size:
        10px;

    line-height:
        1.4;
}


/* ==========================================================================
   REGISTER BUTTON
   Master visual style = buttons.css
   ========================================================================== */

.register-button {

    width:
        100%;

    margin-top:
        5px;
}


/* ==========================================================================
   LOGIN LINK
   ========================================================================== */

.login-link {

    margin:
        22px 0 0;

    padding:
        20px 0 0;

    border-top:
        1px solid #252b28;

    color:
        #737d77;

    font-size:
        12px;

    line-height:
        1.5;

    text-align:
        center;
}


.login-link a {

    color:
        #69f0ae;

    font-weight:
        600;
}


.login-link a:hover {

    color:
        #9affba;

    text-decoration:
        underline;
}


/* ==========================================================================
   BACK BUTTON
   Master visual style = buttons.css
   ========================================================================== */

.back-wrapper {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-top:
        18px;
}


.back-btn {

    min-width:
        220px;
}


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

@media (max-width: 550px) {

    body.register-page {

        padding:
            14px;
    }


    .register-wrapper {

        max-width:
            100%;
    }


    .register-brand {

        margin-bottom:
            18px;
    }


    .register-brand h1 {

        font-size:
            29px;
    }


    .register-brand p {

        font-size:
            11px;
    }


    .register-card {

        padding:
            20px;
    }


    .register-card h2 {

        font-size:
            20px;
    }


    .description {

        font-size:
            11px;

        margin-bottom:
            20px;
    }


    .form-group label {

        font-size:
            11px;
    }


    .form-group input,
    .form-group select {

        min-height:
            40px;

        padding:
            9px 11px;

        font-size:
            12px;
    }


    .register-button {

        width:
            100%;
    }


    .back-btn {

        width:
            100%;

        min-width:
            0;
    }
}