.color_box{display:inline-block;vertical-align:middle;border:2px solid #1e1e1e}.cin{vertical-align:middle;border:2px solid #c4c7ce;color:#333;text-align:center;font-weight:500}.cin:focus{border-color:#4e6ef2}.colorbar{display:inline-block;vertical-align:middle;position:relative;margin-right:12px}.colorbar_bar{position:absolute;top:-2px;border:2px solid #1e1e1e;transform:translateX(-50%)}.colorbar_input{display:inline-block;vertical-align:middle}.colorbar_input>span{font-weight:500}.copyBtn{display:inline-block;margin:8px 16px 0 0;background-color:#4e6ef2;font-size:17px;font-weight:500;color:#fff}.copyBtn:active,.copyBtn:hover{background-color:#4662d9}.wrap{width:540px;margin:60px auto}.colorIn{margin-bottom:32px}.colorIn .cin{margin-left:12px}.colorPicker{font-size:0;margin:12px 0 32px}.colorPicker>div{display:inline-block}.colorPicker .cin{margin:0 6px}.colorCopy{font-size:0}.cout{display:inline-block;vertical-align:middle;margin:0 12px;border:2px solid #4e6ef2;color:#333;text-align:center;font-weight:500;width:180px;line-height:54px;border-radius:11px;padding:0 11px;font-size:43px}body,p{margin:0}input{border:none;outline:0;background:0 0;padding:0}button{padding:0;border:none;outline:0}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#333}.te{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}