.#{$package-prefix}-login-page {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    .login-box {
        margin-top: rem-calc(106px);

        .logo-wrapper {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: rem-calc(200px);
            padding: 0 0 rem-calc(45px) 0;
        }

        .welcome-text-wrapper {
            color: $black;
            font-family: 'Lora Regular';
            font-size: rem-calc(27px);
            text-align: center;
            padding-bottom: rem-calc(32.5px);
        }

        input {
            font-size: rem-calc(14px);
            text-align: center;
            height: 10%;
            margin: rem-calc(12.5px) auto rem-calc(12.5px) auto;
            border-width: rem-calc(1.65px);

            &::placeholder {
                font-style: italic;
                text-transform: uppercase;
            }
        }

        .login-button {
            text-align: center;
            margin: rem-calc(50px) 0 rem-calc(67px) 0;

            span {
                color: $white;
                font-size: rem-calc(16.8px);
                padding: rem-calc(10px) rem-calc(23px) rem-calc(10px) rem-calc(23px);
            }

            button {
                margin-bottom: 0px;
            }

        }

        .forgot-password-wrapper {
            text-align: center;
            color: $black;
            font-family: 'Lora Regular';
            font-size: rem-calc(17px);

            .forgot-password-button {
                outline: none;
                font-family: 'Lora Italic';
                text-decoration: underline;
                color : $black;
            }
        }
    }
}