body{margin:12px;font-size:14px;font-family:Arial;background-color:#fafafa;color:#424242}input,input:focus,button:focus{outline:0}label{display:inline-block}input,button{height:36px;line-height:36px;border-radius:4px;padding:0 8px;border:1px solid #E0E0E0;background-color:#F5F5F5}input:hover,input:focus,button:hover,button:focus{background-color:#ffffff}input{width:500px}form{margin:20px 12px 12px}form button{margin-left:18px}fieldset button{margin-left:12px}fieldset{border:0;padding:16px;margin:16px 0;border-radius:4px;background-color:#EEEEEE}legend{font-weight:bold;color:#FAFAFA;line-height:30px;border-radius:15px;padding:0 12px;background-color:#2196F3}.box{position:relative;margin-top:16px}#display,#all-msg{width:calc(50% - 10px);height:500px;overflow:auto;background-color:#fafafa;margin-top:16px}#display::before,#all-msg::before{display:block;margin-top:-20px}.box span:first-of-type,.box span:nth-of-type(2){width:calc(50% - 10px);color:#757575}#display,.box span:first-of-type{float:left}.box span:first-of-type{text-align:right}.box span:first-of-type::after{width:19px;content:'';height:1px;background-color:#757575;display:inline-block;position:absolute;top:7px}#all-msg,.box span:nth-of-type(2){float:right}p.msg{margin:0.3em;padding:0.3em;background:#99FF33;border-radius:10px;position:relative}p.msg span{font-size:8px;color:#FFF;position:absolute;top:0;right:10px}