* {
    margin: 0;
    padding: 0;
}

.clr {
    clear: both;
}

body {
    background-color: #f4f4f4;
    color: #555555;
    font-family: Verdana,Arial, Helvetica, sans-serif; /*could replace with just font: and also specify normal 12px before Verdana to define these*/
    font-size: small;
    line-height: 1.4em;
    margin: 0;
}

.container {
    width: 97%;
    height: 97%;
    margin: auto;
}




.box-1 {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    background-color: #803F7F;
    color: #ffffff;
    padding: 2%;
    border: 2px white;
    border-radius: 4px;
    margin: 0;
    height: 40px;
}
    /* this is the box for the top banner*/

    .box-1 h1 {
        font-family: Verdana,Arial, Helvetica, sans-serif;
        font-weight: 800;
        font-size: larger;
        margin: 0;
        padding: 0;
        border: 0;
    }

.box-2 {
    background-color: #C084BE; /*this is the box used for ConsInfo & Contacts&Outcomes*/
    color: #000000;
    padding: 2%;
    border: 2px #cccccc;
    height: 8%; /*testing percentage*/
    border-radius: 4px;
    margin: 0;
}

    .box-2 h3 {
        font-family: Verdana,Arial, Helvetica, sans-serif;
        color: black;
        font-size: small;
        font-weight: normal;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .box-2 h4 {
        font-family: Verdana,Arial, Helvetica, sans-serif;
        color: black;
        font-size: smaller;
        font-weight: normal;
        margin: 0;
        padding: 0;
        border: 0;
    }

.box-3 {
    background-color: #EFD0EE;
    color: #000000;
    padding: 2%;
    border: 2px #cccccc;
    border-radius: 4px;
    height: auto;
    margin: 0;
}

    .box-3 h4 {
        font-family: Verdana,Arial, Helvetica, sans-serif;
        color: black;
        font-size: small;
        font-weight: 200;
        margin: 0;
        padding: 0;
        border: 0;
    }



.ConsDetailTable tr:nth-child(even) {
    background: #eeeeee
}

.tar {
    text-align:right;
}

#ConsInfo {
    float: left;
    width: 40%;
    padding: 1%;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

#ContactOutcomes {
    float: right;
    width: 60%;
    padding: 1%;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

.LogoBox {
    flex: 2
}

.BannerInfo {
    flex: 9
}


.SpacingBox {
    flex: 1
}

.EezieForm label {
    display: block;
}

.EezieForm input[type="text"], .EezieForm textarea {
    padding: 8px;
    width: 95%;
}


.checkbox-grid li {
    display: block;
    float: left;
    width: 25%;
}

.InputForm {
    padding-bottom: 15px
}


    .InputForm label {
        float: left;
        width: auto;
        overflow: hidden;
    }

.ContactHistory {
    font-size: small;
}

    .ContactHistory td .WiderColumn {
        width: 60%
    }

    .ContactHistory td .MediumColumn {
        width: 25%
    }

    .ContactHistory td .NarrowColumn {
        width: 15%
    }