.card-with-bg{position:relative;}
.card-with-bg .icon{position:absolute; right:1rem; bottom:1rem;}
.card-with-bg .icon .fa{font-size:3.6rem; color:rgba(0,0,0,.15);}

.custom-file-button{width:6rem; margin-bottom:.5rem;}
.custom-file-button label.btn{position:absolute; top:0; right:0; left:0; z-index:5; height:calc(2.25rem + 2px); font-weight:normal; cursor:pointer;}
.input-color{color:#FFF;}
.input-transparent{background:linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white; background-position:0 0, 5px 5px; background-size:10px 10px; color:transparent;}

.field-row{display:flex; align-items:center;}
.field-col{margin-right:.5rem;}
.field-row .col-check{width:20px; display:flex; align-items:center;}
.field-row .col-name{width:100px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.field-row .col-fc{width:40px;}
.field-row select.form-control{padding:.375rem .5rem;}

.form-color{display:block; width:2.5rem; height:calc(2.25rem + 2px); padding:.3rem; background-color:#fff; border:1px solid #ced4da; border-radius:.25rem; box-shadow:inset 0 0 0 transparent; transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out; overflow:hidden;}
.form-color input{width:100%; min-height:100%; height:calc(1.5rem + 2px); background-color:#fff; border:1px solid #ced4da; border-radius:.25rem; outline:none; overflow:hidden; font-size:.8rem; cursor:pointer;}

.cover-img-box{display:flex; align-items:end;}
.cover-img{position:relative; width:5rem; height:5rem; margin-right:1rem; border:1px solid #ced4da; border-radius:.25rem; overflow:hidden; cursor:pointer;}
.cover-img:hover img{opacity:.2;}
.cover-img .upload{position:absolute; left:0; top:0; z-index:100; width:5rem; height:5rem;}
.cover-img img{position:absolute; left:0; top:0; z-index:11; width:5rem;}
.cover-img img[src=''],.cover-img img[src*='spacer.png']{display:none;}
.cover-img:before, .cover-img:after{position:absolute; left:1.5rem; top:2.5rem; content:''; width:2rem; border-top:2px solid #999; z-index:10;}
.cover-img:after{transform:rotate(90deg);}
.cover-img .cover-loading{position:absolute; left:0; top:0; z-index:12; display:flex; justify-content:center; align-items:center; width:5rem; height:5rem; background:rgba(255,255,255,.6);}
.cover-img .cover-loading .fa{font-size:1.5rem; color:#999; animation:spin 3s linear infinite;}

@keyframes spin{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}

.tmpl-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem;}
.item-tmpl{height:19rem; box-sizing:border-box; padding:1rem; cursor:pointer; box-shadow:0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2); background-color:#f4f6f9;}
.item-tmpl:hover{background:#FFF;}
.item-tmpl .thumb{display:flex; justify-content:center; align-items:center; height:14rem; overflow:hidden;}
.item-tmpl .thumb img{border:1px solid #DDD; background:#FFF; max-width:100%; max-height:100%; overflow:hidden;}
.item-tmpl .info{padding-top:.5rem;}
.item-tmpl .info p{margin:0;}
.item-tmpl-html{height:20rem;}


.config-box h6{font-size:.9rem; font-weight:bold;}
.preview-box{margin-bottom:1rem;}
.preview-box .hd, .preview-box .ft{text-align:center;}
.preview-box .ft .tips-box{display:none; width:250px; margin:0 auto; color:#F60;}
.qrcode-box{position:relative; margin:0 auto; box-shadow:0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); background-color:#FFF; background-repeat:no-repeat; background-position:0 0; background-size:100% 100%;}
.qrocde-info:empty{display:none;}
.qrocde-info p{margin-bottom:0;}
.qrocde-info p.edit{position:relative;}
.qrocde-info p.edit:after{content:''; position:absolute; z-index:100; left:0; top:0; width:100%; height:100%; border:1px dotted #999;}
.qrocde-info .field-value{background: #FCF6B1; padding: 0 .2rem;}
.qrocde-info .field-value::before{content:'\e72a'; margin-right: .2rem;}
.qrocde-info .field-value:empty{display:none;}

.modal-preview .modal-body{height:640px; background:url(/Public/common/images/loading/circle-124-white.gif) no-repeat center center; background-size:50px auto;}
.iframe-preview{width:375px; height:600px; border:none; margin:0 auto; background:#FFF;}

.modal-save .modal-body{height:7rem;}
.modal-save .save-status{display:none;}

.card-submitbar{margin-bottom: 5rem;}
.submit-bar .inner{position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100; border-top: 1px solid #e9ecef; background: #FFF;}

@media (max-width: 575.98px) {
.tmpl-list{grid-template-columns:repeat(1, 1fr);}
}