*{
    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}


#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%
}