#logo {
    max-height: 120px;
    max-width: 300px;
    margin: 30px 0 30px 0;
}

/* /home view classes */
.landing-background {
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/default_background.png);
}

/* /account view classes */
.account-background {
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

    .account-background footer {
        text-align: center;
        font-size: 12px;
        width: 100%;
        margin-top: 20px;
    }

    .account-background h1 {
        margin: 15px !important;
    }

@media screen and (max-width: 600px) {
    .account-background {
        background-image: none !important;
        height: auto;
    }
}

/* /manage view */
.manage-view-main-container {
    height: calc(100vh - 84px);
    padding: 20px 40px 0 40px;
}

@media screen and (max-width: 600px) {
    .manage-view-main-container button {
        width: 100%;
    }
}

@media screen and (max-width: 992px) {
    .manage-view-main-container {
        height: calc(100vh - 132px);
    }
}

/* Primary Card */
.primary-card {
    padding: 30px 40px 30px 40px !important;
}

    .primary-card p {
        margin: 15px 0 15px 0;
    }

        .primary-card p.description {
            text-align: center;
            margin: 0 0 10px 0;
        }

    .primary-card button {
        width: 100%;
    }

    .primary-card .icon {
        margin: 10px 0 25px 0;
    }

@media screen and (max-width: 600px) {
    .primary-card {
        background: none !important;
        box-shadow: none !important;
        max-width: none !important;
        padding: 10px 40px 0 40px !important;
    }
}

/* Navigation Bar */
.primary-nav {
    border-bottom: 2px solid #dedede;
    position: relative;
}

#navLogo {
    width: auto !important;
}

#navLogoImg {
    width: auto !important;
}

/* Typography */
.small-font {
    font-size: 12px !important;
}

.error-font {
    font-weight: 600 !important;
    letter-spacing: normal !important;
}

.input-error {
    font-size: 12px;
    font-weight: 600;
}

    .input-error ul {
        padding-left: 15px;
    }

        .input-error ul li {
            padding-bottom: 10px;
        }

.input-validation-error {
    border-color: #d43f3a !important;
}

.separator-font {
    text-align: center;
}

.card-footer {
    text-align: center;
}

hr {
    border: none;
    background-color: #ccc;
    color: #ccc;
    height: 1px !important;
}

.card-footer {
    text-align: center;
}

/* Input Errors */

.input-error {
    font-size: 12px;
    font-weight: 600;
}

    .input-error ul {
        padding-left: 15px;
    }

        .input-error ul li {
            padding-bottom: 10px;
        }

.input-validation-error {
    border-color: #d43f3a !important;
}


/* Add a green text color and a checkmark when the requirements are right */
.valid {
    color: green;
    position: relative;
}

    .valid:before {
        content: "\f058"; /* this is your text. You can also use UTF-8 character codes as I do here */
        font-family: Font Awesome\ 5 Pro;
        font-weight: 900;
        left: -15px;
        position: absolute;
        top: 1px;
    }

/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid {
    position: relative;
}

    .invalid:before {
        content: "\f057"; /* this is your text. You can also use UTF-8 character codes as I do here */
        font-family: Font Awesome\ 5 Pro;
        font-weight: 900;
        left: -15px;
        position: absolute;
        top: 1px;
    }

.validators {
    padding-left: 15px;
}

.message {
    padding-top: 10px;
}