.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9{padding-right:.2rem;padding-left:.2rem}
@media screen and (min-width:768px) {
  html {font-size:37.84px}
  .container{padding-right:10px;padding-left:10px}
  .row{margin-right:-10px;margin-left:-10px}
  .col-sm-1,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9{padding-right:10px;padding-left:10px}
}

.btn:hover,
.btn:focus,
.btn:active,
.btn:active:focus{outline:none}

.iconfont{width:1em;height:1em;vertical-align:-0.15em;fill:currentColor;overflow:hidden}


/* panel（面板） */
.g-panel{background:#fff;border:1px solid transparent;margin-bottom:.4rem;border-radius:4px}
.g-panel-heading,
.g-panel-body,
.g-panel-footer{padding:.4rem}
.g-panel-heading{border-bottom:1px transparent solid}
.g-panel-heading-border{border-bottom-color:#ec6c00}
.g-panel-footer{background:#fff}
/*.g-panel-default{border-color:#ec6c00}*/


#designer .g-dec{margin:0}
#designer .g-dec>li{padding:0}
#designer .g-img{width:1.25rem}
#designer .g-txt{padding-left:1.6rem}
#designer .g-attr{margin:0}
#designer .u-font-h4{margin-bottom:.15rem}
#designer .list-inline{margin:0}


.btn-radio{padding:0;border:none;background:#fff;font-size:.32rem;text-align:center;line-height:1;color:#333;position:relative;cursor:pointer}
.btn-radio:disabled{background:#E7E7E7;color:#B7B7B7}
.btn-radio input[type=radio]{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:100%;height:100%;opacity:0;cursor:pointer}
.btn-radio input[type=radio]+.txt{display:block;padding:.16rem;white-space:pre-wrap;border:1px #ec6c00 solid;border-radius:2px;cursor:pointer}
.btn-radio input[type=radio]:checked+.txt{color:#488DE1;border-color:#488DE1}
.btn-radio .bold{font-weight:bold}

/* 模版列表搜索框 template list search input */
.template-search-input{box-shadow:0 0 4px #ddd;border-radius:10px}
.template-search-input .form-control{border-radius:10px;border-top-right-radius:0;border-bottom-right-radius:0;border:none;height:auto}
.template-search-input .u-btn{border-radius:10px;border-top-left-radius:0;border-bottom-left-radius:0;width:53px;background-color:#ccc;color:#000}

/* 模版列表 template list */
.template-list{display:flex;flex-wrap:wrap;margin-left:-10px}
.template-list .template-item{padding-left:10px;padding-bottom:10px;width:50%}
.template-list .template-inner{height:100%;min-height:8rem;display:flex;flex-direction:column;margin:0;box-shadow:0 2px 4px #ddd;border-radius: 4px;}
.template-list .template-inner-foot{height:2.8rem;padding:.4rem}
.template-list .template-preview{flex-grow:1;background-color:#e6e6e6;display:flex;align-items:center;position:relative}
.template-list .template-preview-link{max-width:85%;margin-left:auto;margin-right:auto;padding-top:60px;padding-bottom:50px}
.template-list .template-preview-image{width:100%}
.template-list .template-preview-tips{visibility:hidden;position:absolute;left:50%;bottom:40%;background-color:#ec6c00;color:#fff;font-size:.38rem;white-space:nowrap;border-radius:4px;padding:.4rem .6rem;transition:all .1s ease-out;opacity:0;transform:translate(-50%,30px)}
.template-list .template-preview-link:hover .template-preview-tips{visibility:visible;opacity:1;transform:translate(-50%,0)}
.template-free{background-color:#fff;display:flex;align-items:center;justify-content:center}
.template-free .upload-icon{position:relative;display:inline-block;width:3.464rem;height:3.464rem;background-color:#ec6c00;border-radius:50%;color:#fff;font-size:1.4rem;text-align:center;line-height:3.964rem}
.template-free .txt{display:block;font-size:.47rem;text-align:center;margin:.72rem .2rem;font-weight:bold;color:#ec6c00;line-height:1.4;}
.template-panel-shadow{box-shadow:0 2px 4px #ddd}
.template-colors{display:flex;align-items:center;flex-wrap:wrap;margin-bottom:.2rem}
.template-colors .color-item{width:.5813rem;height:.5813rem;border-radius:50%;margin:.1rem .154rem;cursor:pointer;border:1px rgb(0,0,0,.2) solid;position:relative}
.template-colors .color-item:hover{box-shadow:0 0 4px 1px #488DE1}
.template-colors .color-item.active{box-shadow:0 0 0 3px white,0 0 4px 4px #ccc}
.template-colors .color-item .icon{display:none;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width:1em;height:1em;line-height:1em;text-align:center;}
.template-colors .color-item-dark{color:#666}
.template-colors .color-item-light{color:#fff}
.template-colors .color-item.active .icon{display:block}
.template-colors.big{padding:0;margin-bottom:0;margin-top:-.4rem;justify-content:flex-start}
.template-colors.big .color-item{width:.4958rem;height:.4958rem;margin:.1rem;position:relative;font-size:.38rem}
.template-txt{padding:0 .2rem;margin:0 0 .3rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
@media (min-width: 768px){
  .template-list{margin-left:0}
  .template-search-input{width:340px;display:inline-block}
  .template{display:table;width:100%;vertical-align:top}
  .template-left,
  /*.template-list{display:table-cell;vertical-align:top}*/
  .template-left{width:250px;}
  .template-list{display:flex;flex-wrap:wrap}
  .template-colors.big{margin:0 -.2143rem;margin-bottom:0;margin-top:-.4rem}
  .template-colors.big .color-item{width:.7135rem;height:.7135rem;margin:.2643rem}
}
@media (min-width: 992px){
  .template-list .template-item{width:33.333%}
}
.template-free .upload-icon .upload-icon-svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}