body {
    font-family: 'Open Sans', sans-serif !important;
    z-index: 1;
}

body::after {
    content: "";
    background-image: url('../images/background.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.75;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;;
    z-index: -1;
}

.login-box {
    background-image: url('../images/login_pattern.svg') ;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    border-radius: 15px;
    width: 720px;
    height: 400px;
}

.login-body {
    padding: 7pc 4pc 7pc 18pc;
}

.action {
    text-align: end;
}

.forget {
    font-size: 14px;
    margin-left: 6px;
}

/* **************************************** Mobile **************************************** */
@media (max-width:480px) {
    .login-page > div {
        margin-top: 30%;
    }

    .login-box {
        width: 380px;
        height: 220px;
    }

    .login-body {
        padding: 3pc 0.7pc 1pc 9.5pc;
    }

    .login-box * {
        font-size: 10px !important;
    }

    .action {
        text-align: start;
    }

    .custom-input,
    .input-group-append .input-group-text {
        padding: 8px;
    }
}