.div-title {
    height: 50px;
    width: 500px;
    overflow:hidden;
    padding:0;
    position: absolute;
    left: 80%;
    margin: 10px 0 0 -275px;
    background: #66b3ff;
    display: table;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.div-title > .center {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}





.graph > .center {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.graph {
    height: 450px;
    width: 450px;
    overflow:hidden;
    padding:0;
    position: absolute;
    left: 80%;
    margin: 10px 0 0 -275px;
    background: #ffffff;
    display: table;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}














.mytext{
    border:0;
    padding:10px;
    background:whitesmoke;
}
.text{
    width:75%;
    display:flex;
    flex-direction:column;
    font-family: Microsoft JhengHei, serif;
}
.text > p:first-of-type{
    width:100%;
    margin-top:0;
    margin-bottom:auto;
    font-size: 14px;
    line-height: 18px;
}
.text > p:last-of-type{
    width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto;
}
.text-l{
    float:left;padding-right:10px;
}        
.text-r{
    float:right;padding-left:10px;
}
.avatar{
    display:flex;
    justify-content:center;
    align-items:center;
    width:20%;
    float:left;
    padding-right:10px;
}
.macro{
    margin-top:5px;
    width:90%;
    border-radius:5px;
    padding:5px;
    display:flex;
}
.msj-rta{
    float:right;
    background:whitesmoke;
}
.msj{
    float:left;
    background:white;
}
.frame{
    background:#e0e0de;
    height: 90%;
    width: 500px;
    overflow:hidden;
    padding:0;
    position: absolute;
    left: 80%;
    margin: 60px 0 0 -275px;
}
.frame > div:last-of-type{
    position:absolute;
    bottom:0;
    width:100%;
    display:flex;
}

body {
    background: aliceblue;
}
body > div > div > div:nth-child(2) > span{
    background: whitesmoke;padding: 10px;font-size: 21px;border-radius: 50%;
}
body > div > div > div.msj-rta.macro{
    margin:auto;
    margin-left:1%;
}
ul {
    width:100%;
    list-style-type: none;
    padding:18px;
    position:absolute;
    bottom:47px;
    display:flex;
    flex-direction: column;
    top:0;
    overflow-y:scroll;
}

.msj:before{
    width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:-14px;
    position:relative;
    border-style: solid;
    border-width: 0 13px 13px 0;
    border-color: transparent #ffffff transparent transparent;            
}
.msj-rta:after{
    width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:14px;
    position:relative;
    border-style: solid;
    border-width: 13px 13px 0 0;
    border-color: whitesmoke transparent transparent transparent;           
}  
input:focus{
    outline: none;
}        
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #404040;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #404040;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #404040;
}
:-moz-placeholder { /* Firefox 18- */
    color: #404040;
}  

.glyphicon {
    transition: all 0.15s linear;
    background-color: white;
}

.glyphicon:hover {
    background-color: #66b3ff;
}