html {
    font-size: 14px;
}
    body {
        padding-top: 0;
        background: #eee;
    }

    .body-content {
        margin: 0 auto;
        max-width: 1000px;
        background: #fff;
        padding: 0;
    }

    .content-container {
        padding: 0 20px;
    }

    .flex-container {
        display: flex;
        padding: 5px;
    }

    .flex-label {
        width: 100px;
        padding: 5px 0;
    }

    .flex-input {
        width: 100px;
    }

    .flex-action-button {
        width: 420px;
        justify-content: flex-end;
    }

    .flex-container-reverse {
        display: flex;
        flex-direction: row-reverse;
        margin-bottom: 1.5em;
    }
    .header-container {
        display:flex;
        justify-content:space-between;
        background: #808080;
    }
    .header-container, .fooder {
        text-align: right;
        background: #808080;
        padding: 5px 1em;
        height:30px;
    }

    .fooder {
        color: #fff;
    }

    .dashboard, .logout {
        color: #fff;
        text-decoration: underline;
    }

        .dashboard:hover, .logout:hover {
            color: #fff;
        }
    .logo-container {
        border-bottom: 4px #A60F31 solid;
        margin: 0.5em 0;
    }
    .logo {
        padding: 0;
        background: url(/Images/Housing-Foundation-CPH_logo.png) no-repeat;
        height: 6.5em;
        width: 12em;
        background-size: 12em;
    }

    .branding {
        font-family: initial;
        color: #252525;
        text-decoration: none !important;
        padding:2.5em 0 0 0;
    }

    select, input {
        padding: 5px;
    }
    /* Datepickers */
    .form-control {
        border-radius: 0;
        width: 100%;
        border-color: #a0a0a0;
    }

    .customized-datepicker {
        width: 140px;
        max-width: none !important;
        margin: 0 5px;
    }
    /* Notifications */
    .validation-error {
        border: 2px solid #ff0000;
    }

    .error, .success, .warning {
        color: #fff;
        font-weight: bold;
        padding: 0 5px;
    }

    .error {
        background: #ff0000;
    }

    .success {
        background: #068716;
    }

    .warning {
        background: #ff6a00;
    }

    .notification {
        font-weight: bold;
        border: 2px solid #808080;
    }
    /* Set width on the form input elements since they're 100% wide by default */
    input, select, textarea {
        max-width: 280px;
    }
    .svg-dimensions {
        width:100px;
        height:100px;
    }


@media screen and (max-width: 320px) {
    body {
        font-size:0.75em
    }
    .body-content {
        max-width: 320px;
    }
    h2 {
        font-size:1.75em;
    }
    h3 {
        font-size:1.5em;
    }
    .input-group-addon, .input-group-btn {
        width: inherit;
    }
    .svg-dimensions {
        width:50px;
        height:50px;
    }

}