.LoginMainDiv,
    .RegMainDiv {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #414141;
}

    .LoginMainDiv::before,
    .RegMainDiv::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-image: linear-gradient(#1c1c1ce0, #1c1c1ce0), url(../../Content/images/sjh.jpg);
        background-position: center;
        background-size: cover;
        z-index: 1;
        opacity: 0.5;
        filter: blur(2px);
    }

.LoginImgDiv {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: var(--bg-color6);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .LoginImgDiv::before {
        content: "";
        position: absolute;
        height: 85%;
        width: 90%;
        background-image: linear-gradient(#1c1c1ce0, #1c1c1ce0), url(../../Content/images/sjh.jpg);
        background-position: center;
        background-size: cover;
        z-index: 1;
    }

.LoginSubDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.card {
    width: 400px;
    max-width: 600px;
    z-index: 10;
}
.RegMainDiv .card {
    width: 600px;
}

@media screen and (max-width:1000px) {
    .LoginImgDiv::before {
        height: 90%;
    }
}

@media screen and (max-width:450px) {
    .card {
        width: 306px;
    }
}


@media screen and (max-width:752px) {
    .LoginMainDiv .modalResp {
        overflow: auto;
        height: 80vh;
    }

    .LoginMainDiv .card {
        width: auto;
    }
}

@media screen and (max-width:540px) {
    LoginMainDiv .card {
        width: 370px;
    }
}