:root
{
    --error-color: #dd3717;
}

body
{
    background: #f4f4f4;
}

main
{
    min-height: calc(100vh - 60px);

    .container
    {
        padding: 0 20px;
    }

    .backlink
    {
        max-width: 530px;
        box-sizing: border-box;
        padding: 40px 0 0;
        margin: 0 auto;

        a
        {
            color: var(--text-color);
        }

        i
        {
            margin-right: 10px;
        }
    }

    .users.form
    {
        box-sizing: border-box;
        max-width: 530px;
        margin: 40px auto;
        padding: 40px;
        background: white;
        border-radius: 20px;
        box-shadow: 0px 9px 37px rgba(0,0,0,0.06);

        .logo
        {
            padding: 10px 0 20px;
            text-align: center;

            img
            {
                max-width: 200px;
            }
        }

        legend
        {
            text-align: center;
            display: block;
            width: 100%;
            font-size: 28px;
            padding-bottom: 10px;
        }

        .message
        {
            text-align: center;
            padding-bottom: 20px;
            font-size: 16px;
            font-weight: 500;
        }

        .message.error
        {
            color: var(--error-color);
        }

        .fields,
        .buttons,
        .options
        {
            max-width: 430px;
            margin: 0 auto 10px;
            padding-top: 20px;
        }

        .buttons
        {
            padding-top: 0;

            button
            {
                appearance: none;
                background: var(--link-color);
                color: white;
                border-radius: 30px;
                border: none;
                display: block;
                width: 100%;
                box-sizing: border-box;
                text-align: center;
                padding: 15px 20px;
                cursor: pointer;
                font-size: 15px;
                text-transform: uppercase;
                font-weight: 600;
                transition: all 0.25s;

                i
                {
                    display: inline-block;
                    margin-right: 5px;
                    transition: all 0.25s;
                }
            }

            button.next
            {
                i
                {
                    margin-right: 0;
                    margin-left: 10px;
                }
            }

            button:hover
            {
                background: var(--link-color-darkened);
            }

            button.next:hover
            {
                transform: translateX(5px);
            }

            button.back:hover
            {
                transform: translateX(-5px);
            }

            button.disabled:hover
            {
                transform: none;
            }
        }

        .buttons.multiple
        {
            display: flex;
            align-items: center;
            justify-content: space-between;

            button
            {
                width: fit-content;
                padding-left: 40px;
                padding-right: 40px;
            }

            a
            {
                color: var(--text-color);
            }

            button:first-child,
            a:first-child
            {
                margin-right: 10px;
            }

            button:last-child,
            a:last-child
            {
                margin-left: 10px;
            }
        }

        .buttons.space-top
        {
            padding-top: 20px;
        }

        .input.email,
        .input.password,
        .input.text
        {
            input
            {
                border: none;
                background: #f3f3f3;
                border-radius: 30px;
                padding: 15px 20px;
                font-size: 14px;
                font-weight: 500;
                box-sizing: border-box;
            }
        }

        .options
        {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding-top: 30px;
            font-size: 15px;

            .forgotpassword a
            {
                color: var(--text-color);
                font-weight: 400;
                text-decoration: underline;
            }
        }
    }

    .register
    {
        padding-top: 10px;
        text-align: center;
        font-weight: 400;
        font-size: 16px;

        a
        {
            font-weight: 600;
        }
    }

    .registration
    {
        .users.form
        {
            .step
            {
                min-height: 165px;

                .stepMessage
                {
                    font-weight: bold;
                    color: #752121;
                }
            }

            .step.hidden,
            .school.hidden,
            .not_school.hidden
            {
                display: none;
            }

            .step.subcategories .group.hidden,
            .step.levels .group.hidden
            {
                display: none;
            }

            .buttons
            {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                padding-top: 40px;

                button
                {
                    flex: 0 0 calc(50% - 10px);
                }

                button.hidden
                {
                    display: none;
                    pointer-events: none;
                }

                button.disabled
                {
                    opacity: 0.4;
                    pointer-events: none;
                }
            }

            .bullets
            {
                padding-top: 25px;
                text-align: center;

                .bullet
                {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    line-height: 0;
                    background: #eee;
                    margin-right: 8px;
                }

                .bullet.active
                {
                    background: #ccc;
                }

                .bullet.error
                {
                    background: #c75e5e;
                }

                .bullet.error.active
                {
                    background: #bd2121;
                }
            }
        }
    }
}

footer
{
    .footermenu
    {
        padding: 20px;

        ul
        {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            justify-content: right;
            flex-wrap: wrap;
        }

        li
        {
            padding-left: 20px;
        }
    }
}


@media(max-width: 450px)
{
    main
    {
        .users.form
        {
            padding: 20px;

            .options
            {
                display: block;
                text-align: center;

                .rememberme .input.checkbox label
                {
                    margin-bottom: 15px;
                    justify-content: center;
                }
            }
        }

        .register
        {
            font-size: 14px;
        }
    }
}