.form-editor{padding: .4rem .2rem;}
.form-editor .form-title{font-size:16px; margin-bottom: 10px;}
.form-editor .form-prompt{margin-bottom: 20px;}
.form-editor .form-item-subtitle{border-bottom: 2px solid #007bff;}
.form-editor .form-item-submit{background: #007bff;}


.form-item{position: relative; margin-bottom: 15px;}
.form-item-title{font-weight: bold; margin-bottom: 10px;}
.form-item-title em{color: #F60;}
.form-item-subtitle{border-bottom: 2px solid var(--style-color); margin: 20px 0; padding-bottom: 5px;}
.form-item-desc{margin-bottom: 10px;}
.form-item-title:empty, .form-item-desc:empty{display: none;}

.form-item-group{display: block;}
.form-field{display: block; box-sizing: border-box; width: 100%; padding:6px 10px; line-height: 1.5; color: #495057; background: transparent; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 5px; box-shadow: inset 0 0 0 transparent; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; outline: none;}
.form-field:focus{border-color: #007bff;}
.form-field-border{border:none; border-bottom: 1px solid #ced4da; border-bottom-right-radius: 0;}
textarea.form-field{height: auto; overflow: auto; resize: vertical;}

.form-item-label{display: block; margin-bottom: 10px;}
.form-item-label .form-item-group{padding-left: 22px;}
.form-item-option{display: flex; align-items: center; justify-content: flex-start; font-weight: normal;}
.form-item-option input{vertical-align: middle; margin-right:5px;}



.form-item-group{position: relative; display: flex; flex-wrap: wrap; align-items: stretch;}
.form-item-group .form-item-group-icon{display: flex; justify-content: center; align-items: center; width: 36px; background: #e9ecef; border:1px solid #ced4da; border-right: none; border-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; font-size: 16px; color: #666;}
.form-item-group .form-field{flex:1; border-top-left-radius: 0; border-bottom-left-radius: 0;}

.form-item-rate .rate-box ul{display: flex; justify-content: space-between; align-items: center; border:1px solid #e9ecef; border-radius: 5px; list-style: none; margin: 0; padding: 0;}
.form-item-rate .rate-box li{flex:1; text-align: center; font-size: 26px; line-height: 40xp; color: #CCC;}
.form-item-rate .rate-box li.selected{color: #F60;}
.form-item-rate .rate-description{display: flex; justify-content: space-between; align-items: center; color: #999; line-height: 40px;}

.form-item-nps .nps-box ul{display: flex; justify-content: space-between; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0;}
.form-item-nps .nps-box li{flex:1; background:#f2f3f4; color: #999; text-align: center; font-size: 16px; line-height: 30px; border-radius: 5px;}
.form-item-nps .nps-box li.selected{color: #FFF; background: #007bff;}
.form-item-nps .nps-description{display: flex; justify-content: space-between; align-items: center; color: #999; line-height: 40px;}

.form-item-checklist{display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; border:1px solid #e9ecef; border-radius: 5px;}
.form-item-checklist:last-child{margin-bottom: 0;}
.form-item-checklist.finished{border-color:#F60;}
.form-item-checklist .name{padding:10px;}
.form-item-checklist .value{display: flex; align-items: center; color: #999;}
.form-item-checklist .value i{padding: 10px;}

/* upload image list start */
.upload-img-list{display:grid; grid-template-columns:repeat(4, 1fr); gap:5px;}
.upload-img-list .item{position:relative; border-radius:5px; width:90px; height:90px; background: #e9ecef; overflow:hidden;}
.upload-img-list .item .img{display:flex; justify-content:center; align-items:center; width:90px; height:90px;}
.upload-img-list .item img{max-width:90px; max-height:90px;}
.upload-img-list .item .close{position:absolute; top:2px; right:2px; z-index:100; width:22px; height:22px; border: none; outline: none; font-size:22px; color:#fff; background:#333; border-radius:3px; display: flex; justify-content: center; align-items: center;}
.upload-img-list .item-upload{cursor:pointer;}
.upload-img-list .item-upload:before, .upload-img-list .item-upload:after{position:absolute; left:27px; top:40px; content:''; width:40px; 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:90px; height:90px; background:#FFF;}
.upload-img-list .loading .fa{font-size:30px; color:#999; animation:spin 3s linear infinite;}
@keyframes spin{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
/* upload image list end */


.form-error{color:#F60;}
.form-item-submit{display: block; width: 100%; margin-top: 20px; padding: 8px 10px; border-radius: 5px; background: var(--style-color); color: #FFF; font-size: 14px; line-height: 1.5; text-align: center; user-select: none; border: none; outline: none;}