.pages-lockscreen {
    .page-content {
        display: inline-block;
        width: 400px;
        max-width: 100%;
        padding: 30px;
    }
    .avatar {
        width: 50px;
        height: 50px;
        margin: 0 auto;

        img {
            border-radius: 50%;
        }

    }
}
.layout-full {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    font-family: Roboto, sans-serif;
    background: url('../../../assets/images/caiji.jpg');
    &::before {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        content: "";
        background-position: center top;
        background-size: cover;
    }

    &::after {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        content: "";
        background-color: rgba(33, 33, 33, .6);
    }

    .page {
        position: relative;
        height: 100%;
        padding: 0;
        margin: 0;
        background: transparent;
    }

}


.auth-box {

    .copyright {
        margin-top: 60px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1px;

        p {
            margin: 0 0 14px;
        }
    }

    .social {
        mat-icon {
            color: #fff;
        }
    }
}

.vertical-align {
    &::before {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        content: "";
    }

    .vertical-align-middle {
        display: inline-block;
        vertical-align: middle;
    }

}

.pages-login {
    .page-content {
        display: inline-block;
        width: 400px;
        max-width: 100%;
        padding: 30px;
    }

}
.page-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}