.template-list-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  height: calc(100% - 60px);
  overflow-y: auto;
  padding-bottom: 10px;
}
.template-list-box .template-item {
  position: relative;
  cursor: pointer;
  margin: 10px;
  margin-bottom: 0;
  max-width: 120px;
}
.template-list-box .template-item .btn-delTemplate {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.6509803922);
  border-radius: 100px;
}
.template-list-box .template-item .btn-delTemplate:focus {
  outline: unset;
}
.template-list-box .template-item .it-title {
  height: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.template-list-box .template-item .img-bin {
  padding: 10px;
  border: 1px #eee solid;
  border-radius: 10px;
  width: 120px;
  height: 230px;
  background-color: #fff;
}
.template-list-box .template-item:hover {
  border-color: #00AFEC;
}
.template-list-box .template-item.active .img-bin {
  background-color: #f1f2fe;
}
.template-list-box .template-item.active .it-title {
  background: var(--color-primary);
}

.i-icon[data-v-247d74d4] {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	height: 100%;
}

.template-detail .el-upload--picture-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.theme-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.theme-box .theme-box-item {
  width: 32px;
  height: 32px;
  margin-right: 5px;
  margin-top: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.theme-box .theme-box-item.add {
  border: 1px #ccc solid;
  color: #ccc;
}
.tpl-elements .tpl-element-item {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px #ccc solid;
}
.tpl-elements .tpl-element-item .module-item-title {
  cursor: move;
  background-color: #C0C4CC;
  margin: -10px;
  margin-bottom: 10px;
  padding: 10px;
  position: relative;
}
.tpl-elements .tpl-element-item .module-item-title .el-icon-delete-solid {
  padding: 5px;
  position: absolute;
  right: 15px;
  top: 3px;
  cursor: pointer;
  font-size: 16px;
}
.tpl-elements .el-upload--picture-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 414px;
}
.tpl-elements .tpl-module-upload .el-upload--picture-card {
  width: 100%;
  height: 92px;
}
.tpl-elements .tpl-module-upload2 .el-upload--picture-card {
  width: 100%;
  height: 192px;
}
.tpl-elements .category-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding: 0 15px;
}
.tpl-elements .category-box .category-item .category-item-img {
  border-radius: 100%;
  background-color: #ccc;
  width: 50px;
  height: 50px;
}
.tpl-elements .category-box .category-item .category-item-label {
  padding: 5px 0;
  text-align: center;
}