.email {
    height: 90px;
    width: 100%;
    position: relative;
    cursor: pointer;
    margin: 5px 0;
    border: 1px solid #DDD;
}
.email * {
    pointer-events: none;
}
.email__leftside {
    position: relative;
    display: inline-block;
    width: 80%;
    height: 100%;
    vertical-align: top;
    padding-left: 1.3rem;
}
.email__rightside {
    position: relative;
    display: inline-block;
    height: 100%;
    vertical-align: top;
    width: 20%;
    padding-left: 0;
    text-align: right;
    padding-right: .5rem;
}
/*.email__read {*/
/*     width: 7px;*/
/*     height: 7px;*/
/*     left: 5px;*/
/*     top: 5px;*/
/*     border-radius: 7px;*/
/*     background-color: #2c80b8;*/
/*     position: absolute;*/
/* }*/
.email__read {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(44, 128, 184, 0.11);
    position: absolute;
}
.email__read--read {
    display: none;
}
.email__from {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 34px;
    line-height: 34px;
}
.email__subject, .email__body {
    display: block;
    font-size: 1rem;
    height: 27px;
    line-height: 27px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.email__date, .email__time {
    font-size: .8rem;
}
@media screen and (max-width: 991px) {
    .email {
        height: 68px;
    }
    .email__from {
        height: 26px;
        line-height: 26px;
    }
    .email__subject {
        height: 21px;
        line-height: 21px;
    }
    .email__body {
        height: 21px;
        line-height: 21px;
    }
    .email__read {
        width: 4px;
        height: 4px;
    }
}