#ingame_HUD_UnlockNotification {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: all;
    @include InlineAnimation(0.1s ease-in-out) {
        0% {
            opacity: 0;
        }
    }

    .dialog {
        background: rgba(#222428, 0.5);
        @include S(border-radius, $globalBorderRadius);
        @include S(padding, 30px);

        @include InlineAnimation(0.5s ease-in-out) {
            0% {
                opacity: 0;
            }
        }

        color: #fff;
        text-align: center;
        .title,
        .subTitle {
            @include SuperHeading;
            text-transform: uppercase;
            @include S(font-size, 50px);

            @include InlineAnimation(0.5s ease-in-out) {
                0% {
                    transform: translateY(-50vh);
                }
                50% {
                    transform: translateY(5vh);
                }
                75% {
                    transform: translateY(-2vh);
                }
            }
        }

        .subTitle {
            @include Heading;
            background: $colorGreenBright;
            display: inline-block;
            @include S(padding, 1px, 6px);
            @include S(margin, 20px, 0, 20px);

            @include S(border-radius, $globalBorderRadius);
            @include InlineAnimation(0.5s ease-in-out) {
                0% {
                    transform: translateY(-60vh);
                }
                50% {
                    transform: translateY(6vh);
                }
                75% {
                    transform: translateY(-3vh);
                }
            }
        }

        .contents {
            @include S(width, 400px);
            @include InlineAnimation(0.5s ease-in-out) {
                0% {
                    transform: translateX(-100vw);
                }
                50% {
                    transform: translateX(5vw);
                }

                75% {
                    transform: translateX(-2vw);
                }
            }
            display: grid;
            grid-template-columns: auto auto;
            align-items: center;
            justify-content: center;
            @include S(grid-gap, 10px);

            .reward {
                grid-column: 1 / 3;
                @include InlineAnimation(0.5s ease-in-out) {
                    0% {
                        transform: translateX(200vw);
                    }
                    50% {
                        transform: translateX(-10vw);
                    }

                    75% {
                        transform: translateX(4vw);
                    }
                }
            }

            .buildingExplanation {
                @include S(width, 200px);
                @include S(height, 200px);
                display: inline-block;
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
                @include S(border-radius, $globalBorderRadius);
                box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15);
            }
        }

        button.close {
            border: 0;
            @include InlineAnimation(2s ease-in-out) {
                0% {
                    opacity: 0;
                }
                95% {
                    opacity: 0;
                }
            }
            @include S(margin-top, 30px);
        }
    }
}