@auth-warning-color: lighten(#FDF3C0, 5%);
html, body {
    padding:                0;
    margin:                 0;
    font-size:              16px;
    -webkit-font-smoothing: antialiased;
    font-family:            "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
    color:           #888;
    text-decoration: none;
    font-size:       .9em;

    &:hover {
        text-decoration: underline;
    }
}

p {
    color: lighten(#000000, 40%);

    &.small {
        margin-top: 0;
        font-size:  .85em;
    }
}

.mt-auth--container {
    width:      500px;
    min-height: 200px;
    max-width:  100%;
    position:   relative;
    margin:     70px auto;

    &.processing {
        .mt-auth--main-wrapper {
            position: relative;

            &:after {
                content:    '';
                background: rgba(255, 255, 255, .8);
                position:   absolute;
                top:        0;
                left:       0;
                right:      0;
                bottom:     0;
            }
        }
    }

    span.spacer {
        color:   #888888;
        display: inline-block;
        padding: 0 7px;
    }

    @media (max-width: 500px) {
        margin-top: 10px;
    }

}

.mt-auth--header {
    margin-bottom: 30px;
    position:      relative;
    @media (max-width: 500px) {
        padding:       0 20px 20px 20px;
        margin-bottom: 0;

        .mt-auth--logo {
            text-align: center;
            width:      100%;
        }

    }
}

.mt-auth--header_actions {
    position: absolute;
    top:      50%;
    right:    0;
}

.mt-auth--form {
    border:        1px solid #DDDDDD;
    border-radius: 3px;
    box-sizing:    border-box;
    box-shadow:    0 1px 0 rgba(0, 0, 0, .03);

    label {
        display:       block;
        margin-bottom: 8px;

        &.mt-auth--form_remember {
            float:    left;
            display:  inline-block;
            position: relative;
            top:      10px;
            cursor:   pointer;

            input {
                position:     relative;
                margin-right: 10px;
                top:          -1px;
            }

            @media (max-width: 500px) {
                float:   none;
                display: block;
                & + .mt-auth--form_button {
                    margin-top: 20px;
                }
            }

        }

    }

    input:not([type=checkbox]) {
        width:       100%;
        display:     block;
        box-sizing:  border-box;
        line-height: 18px;
        padding:     10px;
        border:      1px solid #888888;
        box-shadow:  0 1px 0 rgba(0, 0, 0, .1);
        margin:      0;
        font-size:   16px;
    }

    select {
        margin-right: 15px;
        @media (max-width: 500px) {
            width:   100%;
            display: block;
            margin:  0;
            & + select {
                margin-top: 15px;
            }
        }
    }

    h2 {
        background:    lighten(#FBFBFB, 1%);
        font-size:     1.2em;
        margin:        0;
        padding:       20px;
        border-bottom: 1px solid #F1F1F1;
    }

    @media (max-width: 500px) {
        border-left:  none;
        border-right: none;
    }

}

.mt-auth--error {
    @red:          darken(#FFEBE8, 70%);
    padding:       20px;
    border-radius: 3px 3px 0 0;
    background:    lighten(#FFEBE8, 2%);
    border:        1px solid darken(#FFEBE8, 10%);
    color:         @red;
    overflow-wrap: break-word;
    word-wrap:     break-word;

    strong {
        display:   block;
        font-size: 1.1em;
    }

    p {
        padding: 0;
        margin:  5px 0 0 0;
        color:   @red;
    }

    & + .mt-auth--form_box,
    & + .mt-auth--form {
        border-top-width:        0;
        border-top-left-radius:  0;
        border-top-right-radius: 0;
    }

    @media (max-width: 500px) {
        border-left:             none;
        border-right:            none;
        border-top-left-radius:  0;
        border-top-right-radius: 0;
    }

}

.mt-auth--form_actions {
    background: rgba(0, 0, 0, .015);

    h3 {
        margin:  0;
        padding: 0;
    }

    &:after {
        content: '\A';
        display: block;
        clear:   both;
    }
}

.mt-auth--form_button {
    background-image: -webkit-gradient(linear,
    left top,
    left bottom,
    color-stop(0, #FDE28B),
    color-stop(1, #FEC655));
    background-image: -o-linear-gradient(bottom, #FDE28B 0%, #FEC655 100%);
    background-image: -moz-linear-gradient(bottom, #FDE28B 0%, #FEC655 100%);
    background-image: -webkit-linear-gradient(bottom, #FDE28B 0%, #FEC655 100%);
    background-image: -ms-linear-gradient(bottom, #FDE28B 0%, #FEC655 100%);
    background-image: linear-gradient(to bottom, #FDE28B 0%, #FEC655 100%);

    border:           1px solid lighten(#634522, 10%);
    border-radius:    3px;
    padding:          10px 20px;
    display:          inline-block;
    box-shadow:       0 1px 0 rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .4);
    margin-left:      10px;
    box-sizing:       border-box;
    line-height:      1em;
    cursor:           pointer;
    color:            darken(#634522, 8%);
    text-shadow:      0 1px 0 rgba(255, 255, 255, .2);
    font-size:        1em;

    &[type=submit] {
        float: right;
    }

    &.cancel {
        float: right;
    }

    &:hover {
        text-decoration: none;
        background:      #FDE28B;
    }

    @media (max-width: 500px) {
        display: block;
        width:   100%;
        float:   none;
    }

}

.mt-auth--password_note {
    background: @auth-warning-color;
}

.mt-auth--form_box {
    padding:  20px;
    position: relative;

    & + & {
        border-top: 1px solid lighten(#DDDDDD, 8%);
    }

    &.info {

        strong:not(.inline) {
            display:   block;
            font-size: 1.1em;
        }

        p {
            padding: 0;
            margin:  10px 0 0 0;

            & + p {
                margin-top: 10px;
            }

        }

        &.notice {
            background: #FFFCE9;
            border:     1px solid lighten(#493706, 50%);

            strong {
                color: #483800;
            }

            p {
                color: #625834;
            }

            & + .mt-auth--form {
                border-top: none;
            }

            &.standard {
                border:     none;
                border-top: 1px solid lighten(#DDDDDD, 8%);
            }

        }

    }

    .mt-auth--password_note {
        display:       block;
        margin-bottom: 10px;
        padding:       10px;
        background:    @auth-warning-color;
        margin-top:    10px;
    }

    .mt-auth--forgot_password_link {
        text-align:  center;
        display:     block;
        margin-left: 0;
    }

    .mt-auth--password_show {
        padding-right: 133px;
    }

    .mt-auth--show-password {
        position:        absolute;
        bottom:          21px;
        right:           21px;
        color:           #888;
        font-weight:     bold;
        text-transform:  uppercase;
        font-size:       12px;
        line-height:     22px;
        text-decoration: none;
        display:         inline-block;
        background:      #FCFCFC;
        padding:         8px 16px;
        border-left:     1px solid #E7ECEF;
        cursor:          pointer;
    }

    .mt-auth--show-password:after {
        content: 'Show Password';
    }

    .mt-auth--password_show[type="text"] + .mt-auth--show-password:after {
        content: 'Hide Password';
    }

}

.mt-auth--footer {
    margin-top: 20px;
    color:      #888888;
    font-size:  .8em;

    a {
        font-size: 1em;
    }

    span {
        &.copyright {
            display: inline-block;
            float:   right;
        }
    }

    @media (max-width: 500px) {
        text-align: center;
        span {
            &.copyright {
                display: block;
                float:   none;
            }
        }

        padding:    0 10px 20px 10px;
    }
}

.mt-auth--form {
    .mt-auth--form_code_container {
        .display-flex;
        .flex-direction-row;
        .flex-justify-content-space-between;

        .mt-auth--form_code_character {
            font-size:      40px;
            line-height:    44px;
            .flex(0 0 60px);
            padding:        5px;
            font-weight:    bold;
            text-transform: uppercase;
            text-align:     center;

            &::placeholder {
                color: rgba(0, 0, 0, .1);
            }
        }
    }
}