#lean_overlay {
    @include background-image(radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2));
    display: none;
    height:100%;
    left: 0;
    position: fixed;
    top: 0;
    width:100%;
    z-index: 100;
}

.modal {
    @include span(5);
    z-index: z-index(mid-front);
    display: none;
    position: absolute;
    left: 50%;
    padding: 8px;
    border-radius: 3px;
    box-shadow: 0 0 5px 0 $shadow-d1;
    background: $gray-d2;
    color: $base-font-color;

    .inner-wrapper {
        z-index: z-index(mid-front);
        background: $modal-bg-color;
        border-radius: 0;
        border: 1px solid $lms-border-color;
        box-shadow: inset 0 1px 0 0 $white-opacity-70;
        overflow: hidden;
        padding-left: ($baseline/2);
        padding-right: ($baseline/2);
        padding-bottom: ($baseline/2);
        position: relative;

        p {
            font-size: font-size(small);
            line-height: 1.4;
        }

        a {
            &:hover,
            &:focus {
                text-decoration: underline;
            }
        }

        header {
            z-index: z-index(mid-front);
            margin-bottom: ($baseline*1.5);
            overflow: hidden;
            padding: 28px $baseline 0;
            position: relative;

            &::before {
                @include background-image(
                    radial-gradient(
                        50% 50%, circle closest-side,
                        $white-opacity-80 0%,
                        $white-transparent 100%
                    )
                );
                content: '';
                display: block;
                height: 400px;
                left: 0;
                margin: 0 auto;
                position: absolute;
                top: -140px;
                width: 100%;
                z-index: z-index(base);
            }

            hr {
                @include background-image(
                    linear-gradient(
                        180deg,
                        $white-transparent 0%,
                        $white-opacity-80 50%,
                        $white-transparent
                    )
                );
                height: 1px;
                width: 100%;
                border: none;
                margin: 0;
                position: relative;
                z-index: z-index(base);

                &::after {
                    @include background-image(
                        linear-gradient(
                            180deg,
                            $light-grey-transparent 0%,
                            $light-grey-solid 50%,
                            $light-grey-transparent
                        )
                    );
                    height: 1px;
                    width: 100%;
                    bottom: 0;
                    content: '';
                    display: block;
                    position: absolute;
                    top: -1px;
                }
            }

            h2 {
                @extend .hd-4;
                position: relative;
                text-align: center;
                text-shadow: 0 1px $white-opacity-40;
                z-index: z-index(base);
                text-transform: uppercase;
                font-family: $font-family-serif;

                .edx {
                    text-transform: none;
                }
            }
        }

        .modal-form-error {
            background: palette(error, back);
            border: 1px solid palette(error, accent);
            color: palette(error, text);
            display: none;
            margin-bottom: $baseline;
            padding: 12px;
        }

        .notice {
            background: $yellow;
            border: 1px solid darken($yellow, 60%);
            color: darken($yellow, 60%);
            display: none;
            margin-bottom: $baseline;
            padding: 12px;
        }

        .activation-message, .message {
            padding: 0 ($baseline*2) ($baseline/2);

            p {
                margin-bottom: ($baseline/2);
            }
        }

        form {
            margin-bottom: 12px;
            padding: 0 ($baseline*2) $baseline;
            position: relative;
            z-index: 2;

            .input-group {
                @include clearfix();
                border-bottom: 1px solid palette(grayscale, back);
                box-shadow: 0 1px 0 0 $white-opacity-60;
                margin-bottom: ($baseline*1.5);
                padding-bottom: ($baseline/2);
            }

            label {
                color: $text-color;
                font: {
                    family: $font-family-serif;
                    style: italic;
                }
                line-height: 1.6;

                &.field-error {
                    display: block;
                    color: palette(error, text);

                    + input,
                    + textarea {
                        border: 1px solid palette(error, accent);
                        color: palette(error, text);
                    }
                }
            }

            input[type="checkbox"] {
                @include margin-right($baseline/4);
            }

            textarea {
                background: $white;
                display: block;
                height: 45px;
                margin-bottom: $baseline;
                width: 100%;
            }

            input[type="email"],
            input[type="text"],
            input[type="password"] {
                background: $white;
                display: block;
                height: 45px;
                margin-bottom: $baseline;
                width: 100%;
            }

            .submit {
                padding-top: ($baseline/2);

                input[type="submit"] {
                    @extend .btn-brand;
                    display: block;
                    height: auto;
                    margin: 0 auto;
                    width: 100%;
                    white-space: normal;
                }
            }
        }

        .close-modal {
            @include transition(all 0.15s ease-out 0s);
            border-radius: 2px;
            cursor: pointer;
            display: inline-block;
            padding: 10px;
            position: absolute;
            right: 2px;
            top: 0;
            z-index: z-index(front);
            color: $lighter-base-font-color;
            font: {
                size: font-size(large);
                family: $font-family-sans-serif;
            }
            line-height: 1;
            text-align: center;
            border: none;
            background: transparent;
            text-shadow: none;
            letter-spacing: 0;
            text-transform: none;

            &:hover,
            &:focus {
                color: $base-font-color;
                text-decoration: none;
                opacity: 0.8;
            }

            &:focus {
                border: none !important;
            }
        }
    }

    #help_wrapper,
    #feedback_form_wrapper,
    .discussion-alert-wrapper {
        padding: 0 ($baseline*1.5) ($baseline*1.5);

        header {
            @include padding-left(0);
            @include padding-right(0);
            margin-bottom: $baseline;
        }

        .note {
            font: {
                size: font-size(x-small);
                family: $font-family-sans-serif;
            }
            line-height: 1.475;
            margin-top: ($baseline/2);
            color: $lighter-base-font-color;
        }
    }

    .tip {
        font-size: font-size(x-small);
        display: block;
        color: $dark-gray;
    }
}

.leanModal_box {
    @extend .modal;
}