.commentbox{
    text-align:left !important;
    position:relative;
    /*border:1px #ccc solid;*/
    margin-top:30px;
    margin-bottom:30px;
    width:100%;
    /*max-width:600px;*/
}

.commentbox.user01:after,
.commentbox.user02:after {
    background: url("../img/icons-user.png");
    background-size: 140px;
    background-position: -36px -25px, center;
    background-repeat: no-repeat;
}
.commentbox.user01,
.commentbox.user02{
    font-weight:bold;
}
.commentbox.user01 i,
.commentbox.user02 i{
    color:#ffb300;
}

.commentbox.user01.right .comment {
    background-color:#e3f2fd;
}
.commentbox.user01.right .comment:after {
    border-right: 15px solid #e3f2fd;
}
.commentbox.user01 .name{
    font-weight:bold;
    color:#2196f3;
    text-align:right;
}
.commentbox.user02.right .comment {
    background-color:#fce4ec;
}
.commentbox.user02.right .comment:after {
    border-right: 15px solid #fce4ec;
}
.commentbox.user02 .name{
    font-weight:bold;
    color:#e91e63;
    text-align:right;
}



.commentbox.girl01:after {
    background: url("../img/icons-girl.png");
    background-size: 280px;
    background-position: -14px -8px, center;
    background-repeat: no-repeat;
}

.commentbox.girl02:after {
    background: url("../img/icons-girl.png");
    background-size: 280px;
    background-position: -82px -8px, center;
    background-repeat: no-repeat;
}
.commentbox.girl03:after {
    background: url("../img/icons-girl.png");
    background-size: 280px;
    background-position: -147px -8px, center;
    background-repeat: no-repeat;
}

.commentbox.girl04:after {
    background: url("../img/icons-girl.png");
    background-size: 280px;
    background-position: -215px -8px, center;
    background-repeat: no-repeat;
}


.commentbox.doctor01:after {
    background: url("../img/icons-doctor.png");
    background-size: 280px;
    background-position: -12px -7px, center;
    background-repeat: no-repeat;
}

.commentbox.doctor02:after {
    background: url("../img/icons-doctor.png");
    background-size: 280px;
    background-position: -78px -7px, center;
    background-repeat: no-repeat;
}
.commentbox.doctor03:after {
    background: url("../img/icons-doctor.png");
    background-size: 280px;
    background-position: -143px -7px, center;
    background-repeat: no-repeat;
}

.commentbox.doctor04:after {
    background: url("../img/icons-doctor.png");
    background-size: 280px;
    background-position: -212px -7px, center;
    background-repeat: no-repeat;
}


.commentbox.man01:after {
    background: url("../img/icons-man.png");
    background-size: 270px;
    background-position: -10px -5px, center;
    background-repeat: no-repeat;
}

.commentbox.man02:after {
    background: url("../img/icons-man.png");
    background-size: 270px;
    background-position: -75px -5px, center;
    background-repeat: no-repeat;
}
.commentbox.man03:after {
    background: url("../img/icons-man.png");
    background-size: 270px;
    background-position: -138px -5px, center;
    background-repeat: no-repeat;
}

.commentbox.man04:after {
    background: url("../img/icons-man.png");
    background-size: 270px;
    background-position: -205px -5px, center;
    background-repeat: no-repeat;
}


.commentbox.boy01:after {
    background: url("../img/icons-boy.png");
    background-size: 275px;
    background-position: -212px -5px, center;
    background-repeat: no-repeat;
}
.commentbox.boy02:after {
    background: url("../img/icons-boy.png");
    background-size: 275px;
    background-position: -140px -5px, center;
    background-repeat: no-repeat;
}
.commentbox.boy03:after {
    background: url("../img/icons-boy.png");
    background-size: 275px;
    background-position: -67px -5px, center;
    background-repeat: no-repeat;
}
.commentbox.boy04:after {
    background: url("../img/icons-boy.png");
    background-size: 275px;
    background-position: 5px -5px, center;
    background-repeat: no-repeat;
}


.commentbox p{
    font-size:inherit;
    line-height:inherit;
    margin-top: 15px;
    margin-bottom: 15px;
}
.commentbox p:first-child{
    margin-top: 0px !important;
}
.commentbox p:last-child{
    margin-bottom: 0px !important;
}

/*
 * left
 */
.commentbox.left .comment:after {
    position: absolute;
    right: -8px;
    top: 20px;
    z-index: 90;
    margin-left: -15px;

    border-top: 8px solid transparent;
    border-left: 15px solid #eee;
    border-right: 0;
    border-bottom: 8px solid transparent;

    content: "";
}

.commentbox.left .comment{
    font-size:95%;
    background-color: #eee;
    border-radius: 20px;
    padding:20px;
    margin-right:79px;
    line-height:150%;
    position: relative;
}

.commentbox.left:after {
    width: 60px;
    height: 60px;
    position:absolute;
    top:0px;
    right:0px;
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    border:2px #bbb solid;
    border-radius: 60px;
}


/*
 * right
 */
.commentbox.right .comment:after {
    position: absolute;
    left: -8px;
    top: 20px;
    z-index: 90;
    margin-right: -15px;

    border-top: 8px solid transparent;
    border-right: 15px solid #e8f5e9;
    border-left: 0;
    border-bottom: 8px solid transparent;

    content: "";
}

.commentbox.right .comment{
    font-size:95%;
    background-color:#e8f5e9;
    border-radius: 20px;
    padding:20px 15px;
    margin-left:79px;
    line-height:160%;
    position: relative;
}

.commentbox.right:after {
    width: 60px;
    height: 60px;
    position:absolute;
    top:0px;
    left:0px;
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    border:2px #bbb solid;
    border-radius: 60px;
}