html{background: #f4f6fc;}
:root{--style-color:#007bff;}
[contenteditable=false]{cursor: default; user-select: none;}

.nav-tabs{padding-left:.5rem;}
.nav-link{padding:.3rem;}

.style-item{padding:1rem; border-bottom:1px dashed #DDD; cursor:pointer;}
.style-item:hover{background:#f8f9fa;}

.custom-file-button{width:6rem; margin-bottom:.5rem;}
.custom-file-button label.btn{position:absolute; top:0; right:0; left:0; z-index:5; font-weight:normal; cursor:pointer;}

/* style column */
.card-header>.card-tools{display:flex; color:#666;}


/* page styles */
.btn-styles{display: none;}
.card-styles .tab-pane .box{font-size: .7rem; color: #333;}
.card-styles .tab-pane .content-s9 li::before{transform: scale(0.8);}
.card-styles .title-s10 .t, .card-styles .title-s11 .t, .card-styles .title-s12 .t, .card-styles .nav-s4 .t-box .t{font-size: 140%;}
.card-styles .nav-s2 .item .t, .card-styles .nav-s3 .item .t{font-size: 120%;}
.card-styles .image-s8 .t{font-size: 160%;}
.card-styles .image-s8 .c, .card-styles .image-s8 .b{font-size: 120%;}
.card-styles .title-s10 .s{font-size: 90%;}
.card-styles .nav-s5{zoom:.8;}
.card-styles .nav-s6{zoom:.6;}
.card-styles .table-s6 td, .card-styles .table-s7 td{font-size: .8rem;}

.form-s1:after{content: ''; position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; user-select: none;}

/* editor column */
.card-editor{color:#666; background-repeat: no-repeat; background-size: 100% auto; background-position:0 138px;}

.editor-top{background: #f8f9fa;}
.editor-top .hd{height:35px; padding:.5rem; text-align:right; font-size:.8rem; display: flex; justify-content: space-between; align-items: center;}
.editor-top a{color:#666;}
.editor-top a:hover, .editor-top a:active{color:#111;}

.editor-title{padding:.5rem; background: #f8f9fa; border-top:1px dashed #DDD;}
.editor-title .form-control{border:none; outline: none; overflow: hidden; height: 30px; padding: 5px; resize: none; font-size: 1rem; line-height: 1; text-align: center;}
.editor-title .form-control:focus{outline: 2px solid #888;}

.editor-toolbar{position: sticky; top: 0; z-index: 100; height:60px; background:#f8f9fa; border-top:1px dashed #DDD; border-bottom:1px dashed #DDD;}
.editor-toolbar ul{display:flex; margin:0; padding:.5rem; list-style:none;}
.editor-toolbar li{position: relative; flex:1; font-size:.7rem; text-align:center; color:#666; border-right:1px solid #DDD; cursor: pointer;}
.editor-toolbar li:hover, .editor-toolbar li:active{color:#111;}
.editor-toolbar ul{display:flex; margin:0; padding:.5rem; list-style:none;}
.editor-toolbar li .input-upload{position: relative; z-index: 2; opacity: 0; width: 100%; height: 100%;}
.editor-toolbar label.input-label{display: block; cursor: pointer; font-weight: normal; position: absolute; top: 0; left: 0; right: 0; z-index: 5;}
.editor-toolbar i{display:block; font-size:1.1rem; line-height:1.6rem;}
.editor-toolbar li:last-child{border-right:none;}

.editor-inner{min-height: 800px;}
[contenteditable]:focus{outline:none;}
.note-editor.note-frame .note-placeholder{color: #A9A9A9;}
.note-editable p{margin-bottom:0;}

.note-editable .video-box-s1, .note-editable .radio-box-s1, .note-editable .file-box-s1, .note-editable .contact-box-s1{cursor: default; user-select: none;}
.note-handle .note-control-selection{display:none !important;}
.note-editor.card{position:relative; border:none; box-shadow:none; border-radius:0; margin-bottom:0; background:transparent;}
.note-editor.card .card-header{border-top-left-radius:0; border-top-right-radius:0; border-bottom:1px dashed #DDD; text-align:center;}
.note-toolbar{position:sticky; top:60px; z-index:100; background:#f8f9fa;}
.note-btn-group .note-btn{font-size:13px; padding:.28rem .54rem;}
.note-statusbar{display:none !important;}

/* remove text background */
/*
.note-color .dropdown-menu {min-width: 170px !important; padding: 0 5px;}
.note-color .note-palette:first-child {display: none !important;}
.note-color .note-palette-title {display: none;}
*/

.editor-copr{position:relative; padding:10px; font-size:12px; text-align:center; border-radius:.25rem;}
.editor-copr .mask{display:none; position:absolute; left:0; top:0; z-index:10; width:100%; height:100%; background:rgba(0,0,0,.4);}
.editor-copr .mask a{display:block; width:8rem; margin:1rem auto 0;}
.editor-copr:hover .mask{display:block;}

.card-editor .box:hover{outline:2px dashed #888; border-radius:5px;}
.card-editor .box.selected{outline:2px solid #888; border-radius:5px;}
.card-editor .box.selected .image-style-2:first-child{box-shadow: 0 -2px 0 0 #888;}
.card-editor .box.selected .image-style-2:last-child{box-shadow: 0 2px 0 0 #888;}
.card-editor .box.selected .image-style-2:only-child{box-shadow: 0 0 0 2px #888;}
.card-editor .box a{position: relative;}
.card-editor .box .selected{outline: 1px dashed #AAA;}
.card-editor .box .selected .selected{outline: none;}

/**/
.modal-body .card{box-shadow:none; margin-bottom:0;}

.card-styles p{margin: 0;}
.card-styles .nav-tabs .nav-link{font-size:.8rem;}

.card-qrcode .hd{display:flex; justify-content:center;}
.card-qrcode .info-box{min-height:14rem; padding: 0; display: flex; align-items: center; justify-content: center;}
.card-qrcode .info-box .fa{color:#F6F6F6; font-size: 6rem; line-height: 1;}
.card-qrcode .info-box canvas, .card-qrcode .info-box img{width: 100%;}

.card-field .card-body:empty{text-align: center; color: #999;}
.card-field .card-body:empty::before{content: '无可变字段';}
.card-field .btn-tool.btn-xs{margin-top:-.2rem; font-size: .8rem;}

.card-editor .field{display: inline-block;}
.card-editor .field.selected, .card-editor .field:hover{outline: 1px dotted #A9A9A9;}
.card-editor .field-image{position: relative; height: 16rem; background: url(/Public/home/editor/images/tmpl/image-default.jpg) no-repeat;}
.card-editor .field-file{position: relative;}
.card-editor .field-image .field, .card-editor .field-file .field{position: absolute; left: 50%; top: 50%; z-index: 3; margin: -.5rem 0 0 -2rem; font-size: 1rem;}
.card-editor .field-image::after, .card-editor .field-file::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,.5); z-index: 2; content: '';}

.field-item{display: flex; justify-content: space-between; align-items: center; min-height: 1rem; box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); border-radius:.1rem; margin-bottom: .5rem; padding:.4rem .5rem; cursor: pointer;}
.field-item .name, .card-editor .field{background: #FCF6B1; padding: 0 .2rem; color: #333;}
.field-item .name{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.field-item .tools{visibility: hidden; width:5rem; text-align: right;}
.field-item:hover{background:#f8f9fa;}
.field-item:hover .tools{visibility: visible;}
.form-group-image{display: none;}
.modal-edit-field-image .form-group-image{display: block;}

.modal-body-editor-bg h6{font-size:.9rem; line-height:2rem; margin-bottom:0;}
.select-items ul{margin:0; padding:0; list-style:none; margin-bottom:.8rem;}
.select-items li{float:left; width:1.5rem; height:1.5rem; border:1px solid #DDD; border-radius:.2rem; margin:0 .3rem .3rem 0; cursor:pointer;}
.select-items li.active{box-shadow:0 0 3px 1px #2196f3;}

.select-items-sm h3{line-height:1.2rem;}
.select-items-sm li{width:1.3rem; height:1.3rem;}
.select-items-lg li{width:4.5rem; height:4.5rem;}

.select-items .img-upload{position:relative; display:flex; width:100%; height:100%; padding-top:2.4rem; justify-content:center; box-sizing:border-box; font-size:.8rem; color:#999;}
.select-items .img-upload:before, .select-items .img-upload:after{position:absolute; left:1.5rem; top:1.5rem; content:''; width:1.2rem; border-top:.04rem solid #AAA; z-index:2;}
.select-items .img-upload:after{transform:rotate(90deg);}

/* preview */
.preview-box{background:#F5F5F5; box-sizing: border-box; text-align: center;}
.preview-box img{width: 90%; margin: 0 auto;}


/* popover */
.menu-box{position:absolute; z-index:101; box-shadow:0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2); background: ; border-radius: .25rem;}
.menu-box .btn-color{position: relative; width: 42px; background:#e9ecef;}
.menu-box .btn-color i{width: 16px; height: 16px; display: block; position: absolute; left: 50%; top:50%; margin: -8px 0 0 -8px; border-radius:2px;}
.menu-img{position:absolute; background:rgba(0,0,0,.6); display:flex; justify-content:center; align-items:center;}
.menu-img a{display:block; padding:0 .6rem; text-align:center; color:#FFF; white-space: nowrap; font-size: .8rem;}
.btn-link-info:not(:disabled):not(.disabled){cursor: default;}
.btn-link-info:hover{background: #f8f9fa;}

.btn-colorpicker{display:flex; justify-content:center; align-items:center; width:1.4rem; height:1.4rem; border:1px solid #DDD; border-radius:.2rem; cursor:pointer;}
.btn-colorpicker i{display:block; width:1rem; height:1rem; border-radius:.2rem; background:#007bff;}
.btn-colorpicker-lg{width:1.6rem; height:1.6rem;}
.btn-colorpicker-lg i{width:1.1rem; height:1.1rem;}

.dropdown-edit{position:absolute; z-index:100; width: 18rem; box-shadow:0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2); background: #FFF;}
.dropdown-edit .hd{padding: .5rem 1rem; background: #f4f6fc; font-weight: bold; color: #666;}
.dropdown-edit .hd .fa{color:#007bff; font-weight: normal;}
.dropdown-edit .bd{padding: 1rem;}
.dropdown-edit .col-form-label{line-height: 1;}

.dropdown-colors{position:absolute; top:0; padding:.8rem; width:15rem;}
.dropdown-colors h6{font-size:.8rem; margin-bottom:.5rem; color:#666;}
.dropdown-colors ul{list-style:none; margin:0; padding:0; margin-bottom:.8rem;}
.dropdown-colors li{float:left; width:1.3rem; height:1.3rem; border:1px solid #DDD; border-radius:.2rem; margin:0 .3rem .3rem 0; cursor:pointer;}
.dropdown-colors li.active, .dropdown-colors li:hover{box-shadow:0 0 3px 1px #2196f3;}

.form-color{display:block; width:1.8rem; height:1.8rem; padding:2px; 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%; height:100%; background-color:#fff; border:1px solid #ced4da; border-radius:.25rem; outline:none; overflow:hidden; font-size:.8rem; cursor:pointer; color:#FFF;}

.modal .radio-item{height:2rem; margin-right: 2rem; display: flex; align-items: center;}
.modal .radio-item .note{font-weight: normal; display: flex; align-items: center;}
.modal .radio-item .note span{margin-right: .5rem;}
.modal .radio-item .note input.form-control{width: 3.4rem;}


.upload-img-list{display:grid; grid-template-columns:repeat(5, 1fr); gap:10px;}
.upload-img-list .item{position:relative; border-radius:.3rem; width:5rem; height:5rem; border:1px solid #DDD; overflow:hidden;}
.upload-img-list .item .img{display:flex; justify-content:center; align-items:center; width:5rem; height:5rem;}
.upload-img-list .item img{max-width:5rem; max-height:5rem;}
.upload-img-list .item .close{position:absolute; top:2px; right:2px; z-index:100; width:1.2rem; height:1.2rem; border: none; outline: none; font-size:1.1rem; line-height:1.1rem; color:#fff; background:#333; border-radius:.2rem; font-weight:200; text-align:center;}
.upload-img-list .item-upload{cursor:pointer; border-style: dashed;}
.upload-img-list .item-upload:before, .upload-img-list .item-upload:after{position:absolute; left:1.5rem; top:2.5rem; content:''; width:2rem; border-top:2px solid #999; z-index:10;}
.upload-img-list .item-upload:after{transform:rotate(90deg);}

.upload-img-list .loading{position:absolute; left:0; top:0; z-index:12; display:flex; justify-content:center; align-items:center; width:5rem; height:5rem; background:#FFF;}
.upload-img-list .loading .fa{font-size:1.5rem; color:#999; animation:spin 3s linear infinite;}

.upload-notes{border-top:1px solid #ced4da; padding-top: 1rem; font-size: .8rem; color: #666;}
.upload-notes h6{font-size: .8rem; font-weight: bold;}
.upload-notes ol{margin: 0; padding-left: 1rem;}

.form-period .input-group{width:12rem;}
.form-group a{font-weight:normal;}

.form-group .select2-container{display:block;}
.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#007bff; border-color:#006fe6;}
.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple{border-color:#ced4da;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#F1F1F1;}

.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;}

.box-control{background: #F0F0F0; padding: .5rem; font-size: .8rem;}
.box-control .input-group.date{width: 8rem;}

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

@keyframes fadeInRight {
    from {transform: translate3d(1000px,0,0); opacity: 0;}
    to {transform: translate3d(10px,0,0); opacity: 1;}
}

@media (max-width: 575.98px) {
.btn-styles{display: block;}
.card-styles{display:none; position: fixed; z-index: 2000; background: #FFF; top: 0; right: 0; overflow: scroll; width: 65%; height: 100%;}
.control-card-style .card-styles{animation:fadeInRight 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 alternate forwards; display: block;}
.dropdown-colors{z-index: 2001;}
.upload-img-list{grid-template-columns:repeat(4, 1fr);}
}