body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: Montserrat, Helvetica, Arial, sans-serif !important;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
}

.login-box {
    width: 500px;
    border: 1px solid #dcdcdc;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    overflow: hidden;
}

.login-header {
    background-color: #f9f9f9;
    border-bottom: 1px solid #dcdcdc;
    padding: 22px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.login-body {
    padding: 24px 50px 28px 50px;
}

.input-group {
    position: relative;
    margin-bottom: 18px;
}

    .input-group input {
        width: 100%;
        padding: 16px 16px 16px 50px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;
        box-sizing: border-box;
    }

    .input-group::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .input-group:nth-child(1)::before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="gray" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4 -4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
    }

    .input-group.password::before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="gray" viewBox="0 0 24 24"><path d="M12 17a2 2 0 100-4 2 2 0 000 4zm6-10h-1V6a5 5 0 10-10 0v1H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm-6-3a3 3 0 013 3v1H9V7a3 3 0 013-3zm6 15H6V9h12v10z"/></svg>');
    }

.remember {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #555;
    margin-bottom: 20px;
}

    .remember input {
        margin-right: 8px;
    }

.remember-checkbox {
    transform: scale(1.5);
    margin-left:15px;
    margin-right:5px;
}
.sign-in-button {
    background-color: #0071c5;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
}

    .sign-in-button:hover {
        background-color: #005fa3;
    }

.help-link {
    margin-top: 14px;
    font-size: 15px;
    color: #555;
    text-align: center;
}

    .help-link a {
        text-decoration: none;
        color: #0071c5;
    }

        .help-link a:hover {
            text-decoration: underline;
        }