@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap');

html, body.loginWrapper, .loginWrapper {
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    background-color: var(--IQLightBlue);
    background-image: url(../img/GradBackground.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow-y: initial;
    min-height: 100vh;
   
}


.login-layout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   
}

.box-wrapper {
    display: flex;
    flex-direction: column;
    width: 80%;
    border-radius: 8px;
    background-color: var(--IQDarkBlue);
    color: white;
    padding: 2em;
    margin: 2rem auto;
    
}

    .box-wrapper .logo {
        display: flex;
        width: 100%;
        max-width: 400px;
        height: auto;
        margin: 2rem auto;
        align-items: center;
        justify-content: center;
    }

    .box-wrapper .login-content-wrapper {
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 1em;
        color: var(--IQWhite);
    }

    .box-wrapper .login-btn {
        border-radius: 8px;
        padding: 0.5em;
        margin: 0.5em;
        text-transform: uppercase;
        background-color: var(--IQLightBlue);
        color: var(--IQWhite);
        width: 100%;
        border: none;
    }

        .box-wrapper .login-btn:hover {
            padding: 0.5em;
            margin: 0.5em;
            text-transform: uppercase;
            color: var(--IQBlack);
            background-color: var(--IQWhite);
            cursor: pointer;
        }

        .box-wrapper .login-form {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .box-wrapper .form-control {
            margin: 0.5em;
        }

    .box-wrapper .forgot-password {
        padding: 0.5em;
        margin-left: 1em;
        color: var(--IQWhite) !important;
        text-decoration: none;
    }

        .box-wrapper .forgot-password:hover {
            text-decoration: underline;
            cursor: pointer;
        }

        .box-wrapper .header{
            margin-top: 2rem;
        }

@media (min-width: 700px) {
    .box-wrapper {
        display: flex;
        flex-direction: column;
        width: 40%;
        border-radius: 8px;
        padding: 2em;
    }
}