* {padding:0;margin:0;box-sizing:border-box;position:relative;outline:none;}
body {overflow:hidden;font-size:14px;}
.list {overflow-x:hidden;background:#f3f4fa;width:100vw;height:100vh;float:left;padding:30px 20px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-content:baseline;transition:width .4s linear;}
.list.collapse {width:20vw;justify-content:space-evenly;}
.list-item { width:400px;height:300px;min-width:16vw;flex-shrink:1;margin:10px 20px;padding:10px;border-radius:10px;border:1px solid #cecece;overflow:hidden;cursor:pointer;}
.list-item.current {border:2px solid #5b89fe;}
.item-name {position:absolute;width:100%;left:0;bottom:0;height:40px;line-height:40px;padding-left:10px;background-color:#f8f8f8;font-weight:700;pointer-events:none;}
.item-image {position:absolute;width:100%;height:calc(100% - 40px);top:0;left:0;border-bottom:1px solid #cecece;background-color:#fff;pointer-events:none;}

.edit {overflow-x:hidden;width:80vw;height:100vh;float:left;border-left:1px solid #cecece;padding:30px 20px;}
.edit-close {position:absolute;top:10px;right:10px;cursor:pointer;}
.edit .pro {display:none;}
.edit-item {width:100%;min-height:40px;line-height:40px;}
.edit-section {height:40px;overflow:hidden;border-bottom:1px solid #cecece;transition:all .5s linear;}
.edit-section.full {height:auto;}
.edit-button-collapse {position:absolute;width:16px;height:16px;line-height:14px;top:12px;left:0;color:#666;cursor:pointer;z-index:1;}
.edit-button-collapse::before {content:'▼';position:absolute;width:100%;height:100%;top:0;left:0;}
.edit-section.full .edit-button-collapse::before {content:'▲';}
.edit-label {width:10%;display:inline-block;vertical-align:top;color:#333;padding-left:20px;}
.edit-value {width:80%;display:inline-flex;}
.edit-item input {width:100%;height:32px;line-height:32px;border:1px solid #cecece;border-radius:4px;padding:0 5px;margin:0 5px;}
.edit-item input[type=radio] {width:16px;height:16px;border:1px solid #cecece;margin-top:7px;}
.edit-item span {display:inline-block;height:32px;line-height:32px;margin:auto 10px auto 4px;}
.edit-item select {width:100%;height:32px;line-height:32px;border:1px solid #cecece;border-radius:4px;padding:0 5px;margin:0 5px;}
.edit-item textarea {width:100%;line-height:20px;border:1px solid #cecece;border-radius:4px;padding:0 5px;margin:0 5px;}

#chart_colors {width:100%;display:flex;}
.chart-color-add {cursor:pointer;color:#00a1d6;display:inline-block;}
.chart-color-add:hover {text-decoration:underline;}
.chart-color-item {width:100px;height:40px;line-height:40px;display:inline-block;margin-right:5px;}
.chart-color-delete {position:absolute;width:14px;height:14px;line-height:12px;top:0;right:-5px;text-align:center;font-size:12px;background-color:#fff;border:1px solid #cecece;cursor:pointer;}
.chart-color {height:40px;line-height:40px;}

#chart_code {font-size:12px;line-height:16px;}
.chart-container {width:100%;height:600px;border:1px solid #666;margin:5px;}