body {
    background-color: #f5f6fa;
    margin:0;
    height: 100%;
    overflow: hidden;
}

/* login page */
#login-container {
    width: 95%;
    max-width: 600px;
    padding: 2rem;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    background: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.center {
    text-align:center;
}

#left-column {
    height: 100vh;
    border-right: 1px solid black;
    padding: 2em;
    background: #252957;
    color: white;
}

#header {
    flex: 0 1 30px;
    background: white;
}


#nav, .nav {
    padding: 7px;
    flex: 0 1 3em;
    display: flex;
}

    #nav a, .nav a {
        margin-left: 0.7em;
        align-self: center;
    }

#position {
    order: 2;
    margin-left: auto;
    align-self: center;
}

#nav a.current {
    text-decoration: underline;
    cursor: initial;
    pointer-events: none;
}

#message-headers, #recipients-headers {
    flex: 0 1 3em;
    background: white;
    border-bottom: 1px solid black
}

    #message-headers .column, #recipients-headers .column {
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 1.1em;
    }

#main-content {
    flex: 1 1 calc(100vh - 6em - 150px);
    overflow-y: auto;
}


#content {
    margin-left: 0px;
    max-width: 100%;
}

#main-column {
    display: flex;
    flex-flow: column;
    height: 100%;
    overflow-y:hidden;
}

.row{
    margin-left: 0;
    width: 100%;
}

.row .column {
    padding: 0
}

.row .column.column-15 {
    flex: 0 0 15%;
    max-width: 15%;
}

#messages-grid, #recipients-grid {
    width: 100%;
}

    #messages-grid a, #recipients-grid a{
        color: black;
    }

    #messages-grid .column, #message-headers .column, #recipients-grid .column, #recipients-headers .column {
        padding: 0.1em;
        margin-left: 0.4em;
    }

#messages-grid .column {
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
    min-width: 0;
}

#messages-grid .recipient {
    min-width:0;
}

#messages-grid .recipients, #message-headers .recipients {
    flex: 1 0 220px;
}

#messages-grid .subject, #message-headers .subject {
    flex: 1 0 250px;
}

#messages-grid .body, #message-headers .body {
    flex: 1 1 auto;
}

#message-headers .sent-on {
    flex: 1 0 217px;
}

#messages-grid .sent-on {
    flex: 1 0 200px;
}

#messages-grid .row:nth-child(odd), #recipients-grid .row:nth-child(odd) {
    background: #dde3ed
}


#recipients-grid .recipient-type, #recipients-headers .recipient-type {
    flex: 1 0 220px;
}
#recipients-grid .recipient-email-phone, #recipients-headers .recipient-email-phone {
    flex: 1 0 220px;
}
#recipients-grid .recipient-sent-on, #recipients-headers .recipient-sent-on {
    flex: 1 0 220px;
}
#recipients-grid .recipient-status, #recipients-headers .recipient-status {
    flex: 1 0 220px;
}


#left-column a {color:white;}
#left-column a.btn {margin-bottom: 2em;}

.btn { display: inline-block; text-decoration: none; color: white; border: 1px solid #4753a3; padding: 5px 12px;  border-radius: 4px; background:#4753a3}
.btn:hover{color:white}