.template_v4{
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: calc(100% - 42px);
    overflow: hidden;
}
.template_v4 *{
    box-sizing: border-box;
    /*全部都不可以选中*/
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: none;
    outline: none;
    font-style: normal;
}
.template_v4_edit .template_index,.template_v4_edit .template_header,.template_v4_edit .template_footer,.template_v4_edit .template_left,.template_v4_edit .template_content{
    min-height: 1px;
    padding: 3px;
    box-sizing: border-box;
}
/*顶部配置栏*/
.template_v4_actions{
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
}
.v4_top_title{
    margin: 0px 20px;
}
.v4_top_layout{
    display: flex;
    align-items: center;
}
.v4_top_option{
    z-index: 999;
    height: 39px;
    padding-top: 11px;
    overflow: hidden;
}
.v4_top_option_li{
    display: flex;
    background: #fff;
    padding: 0px 15px 15px 15px;
}
.v4_top_option_li_name{
    font-size: 12px;
    margin-right: 10px;
    min-width: 50px;
}
.v4_top_option_li_value {
    border: 1px solid #ccc;
    min-width: 100px;
    padding: 3px 5px;
    font-size: 12px;
    outline: none;
    margin-top: -2px;
}

.v4_top_list{
    margin-right: 20px;
    display: flex;
    flex: 1;
    justify-content: flex-end;
}
.v4_top_list_li{
    margin-right: 10px;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 3px;
    background: #ccc;
    color: #fff;
    cursor: pointer;
}
/*主题编辑主页面*/
.template_v4_edit{
    position: relative;
    height: calc(100% - 31px);
    overflow-y: auto;
    width: 100%;
}
/*主题编辑器下的所有框架布局和组件的最小高度为4px*/
.template_v4_edit *{
    min-height: 4px;
}

/*配置右侧固定弹窗*/
.template_v4_options{
    border-left: 1px solid #ccc;
    width: 296px;
    height: calc(100% - 61px);
    position: absolute;
    background: #fff;
    top: 40px;
    right: 0;
    display: none;
}
.template_option_style{
    display: flex;
    border-bottom: 1px solid #ccc;
    font-size: 12px;
}
.template_option_style [option="全局主题样式设置"]{
    padding: 5px;
    width: 20%;
    text-align: center;
    cursor: pointer;
    background: #fff;
    color: #000;
}.template_option_style [option="全局主题样式设置"]:hover{
    background: #0081fa94;
    color: #fff;
}






/*配置设置*/
.设置配置容器,.样式配置容器{
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #333;
}
.设置配置容器,.样式配置容器{
    display: flex;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid rgb(68, 68, 68);
    align-items: center;
    position: relative;
    background: #fafafa;
}

.设置配置容器_配置名,.样式配置容器_配置名{
    width: 90px;
    flex-shrink: 0;
    text-align: center;
    border-right: 1px solid #333;
    font-size: 11px;
}
.设置配置容器_下拉容器,.样式配置容器_下拉容器{
    position: relative;
    display: flex;
    align-items: center;
}
.样式配置容器_下拉容器{
}
.设置配置容器_下拉容器_点击区域,.样式配置容器_下拉容器_点击区域{
    padding-right: 5px;
    height: 24px;
    cursor: pointer;
    display: flex;
}
.设置配置容器_下拉容器_点击区域_展示,.样式配置容器_下拉容器_点击区域_展示{
    min-width: 60px;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
    margin: 5px 10px;
    padding: 3px 3px;
    color: #333;
}
.设置配置容器_下拉容器_点击区域_配置名,.样式配置容器_下拉容器_点击区域_样式名{
    padding-left: 10px;
    line-height: 24px;
    font-size: 12px;
    width: max-content;
    min-width: 100px;
    padding-right: 10px;
}
.样式配置容器_下拉容器_点击区域_样式名_下拉{
    width: 165px;
    font-size: 12px;
    line-height: 22px;
    padding-left: 10px;
}
.设置配置容器_下拉容器_点击区域_图标,.样式配置容器_下拉容器_点击区域_图标{
    float: right;
    font-size: 15px;
    line-height: 24px;
    cursor: pointer;
}
.设置配置容器_下拉容器_下拉列表,.样式配置容器_下拉容器_下拉列表{
    display: none;
    width: calc(100%);
    top: 26px;
    position: absolute;
    right: 0px;
    background: #fff;
    z-index: 9;
    line-height: 24px;
    border: 1px solid #33383c;
    cursor: pointer;
    max-height: 215px;
    overflow-y: auto;
    box-sizing: border-box;
}
.设置配置容器_下拉容器_下拉列表_下拉,.样式配置容器_下拉容器_下拉列表_下拉{
    background: #33383c20;
    padding-left: 10px;
    font-size:12px;
    color: #333;
}
.设置配置容器_下拉容器_下拉列表_下拉:hover,.样式配置容器_下拉容器_下拉列表_下拉:hover{
    background: #33383c;
	color: #fafafa;
}
.设置配置容器 > :not(span),.样式配置容器 > :not(span){
    flex-shrink: 0;
}
.样式配置容器_样式值{
    border: 1px solid #333;
    padding: 0px 5px;
    font-size: 12px;
    line-height: 22px;
    margin-right: 5px;
    flex: 1;
}
.添加样式元素{
    display: inline-block;
    line-height: 24px;
    min-width: 70px;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    background: rgb(0, 129, 250);
    color: rgb(255, 255, 255);
    margin-right: 10px;
    cursor: pointer;
}
.基础样式表单 {
    line-height: 29px;
    width: 147px;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    margin: 0px;
    padding: 0px 0px 0px 10px;
    outline: none;
}
[option="样式配置下拉"] {
    float: right;
    font-size: 17px;
    line-height: 30px;
    cursor: pointer;
}
[option="组件切换设置"]{
    cursor: pointer;
    padding: 5px 10px;
}
/*[category="单选"]因为 grid和flex图标也使用了,所以这里不使用这个选择器*/
.基础样式单选选项{
    height: 20px;
    line-height: 20px;
    padding: 0px 5px;
    border-radius: 3px;
    color: #fafafa;
    background: #ccc;
    margin-left: 5px;
    cursor: pointer;
    font-size: 9px;
}
.文本单选 {
    display: inline-block;
    line-height: 24px;
    min-width: 70px;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
    background: #ddd;
    margin-right: 10px;
    cursor: pointer;
}
/*样式列表css*/
.style_data_li {
    display: flex;
    align-items: center;
    position: relative;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid rgb(68, 68, 68);
}
.style_data_li .style_data_name{
    width: 90px;
    flex-shrink: 0;
    text-align: center;
    border-right: 1px solid #333;
    font-size: 11px;
}
.codev_style_range{
    appearance: none;
    color: #000;
    height: 5px;
    border: 1px solid #33383c;
    flex: 1;
    margin-left: 5px;
}
.codev_style_range::-webkit-slider-thumb{
	-webkit-appearance: none;
	background: #33383c;
	height: 16px;
	width: 4px;
	cursor: pointer;
}
/*Grid容器和Flex容器的相关样式*/
.style_data_list {
    display: flex;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid rgb(68, 68, 68);
    align-items: center;
    position: relative;
}
.style_data_list .style_data_name {
    width: 90px;
    flex-shrink: 0;
    text-align: center;
    border-right: 1px solid #333;
    font-size: 11px;
}
.style_data_list .style_data_box {
    display: flex;
    align-items: center;
    flex: 1;
}
.style_data_list .style_data_box_li {
    margin: 0px 2px;
    cursor: pointer;
}



/* 设置滑动条滑块在火狐浏览器中的样式 */
.codev_style_range::-moz-range-thumb{
	background: #33383c;
	height: 16px;
	width: 4px;
	cursor: pointer;
}
.codev_style_desc {
    font-size: 12px;
    padding: 5px;
    cursor: pointer;
    width: max-content;
    
}
.codev_style_del{
    margin-right: 10px;
    color: #f00;
    background: rgba(255, 102, 0, 0.3);
    width: 15px;
    height: 15px;
    line-height: 13px;
    text-align: center;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
}

/*提示文本*/
[action="show_msg_data"]{
    text-align: right;
    padding-right: 10px;
    font-size: 12px;
    color: #197d83;
    line-height: 22px;
}
[action="样式添加"]{
    background: #0081fa;
    padding: 5px;
    text-align: center;
    color: #fafafa;
    font-size: 12px;
}
/*右侧组件样式配置*/
.tipmsg_title_ex {
    line-height: 32px;
    background: rgb(68, 68, 68);
    color: rgb(250, 250, 250);
    cursor: pointer;
    font-size: 12px;
    padding-left: 10px;
}
.style_data_option {
    display: flex;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid rgb(68, 68, 68);
    align-items: center;
    position: relative;
}
.style_data_option .style_data_name {
    width: 90px;
    flex-shrink: 0;
    text-align: center;
    border-right: 1px solid #333;
    font-size: 11px;
}
.style_data_option .style_data_value{
    line-height: 29px;
    border: 0px;
    margin: 0px;
    padding: 0px;
    outline: none;
    background: #ddd;
    padding-left: 10px;
    flex: 1;
    font-size: 12px;
    color: #817e7e;
}
.style_data_option .style_data_value[contenteditable="true"]{
    background: #fff;
}
/*颜色选择器样式*/
.minicolors-theme-bootstrap .minicolors-swatch{left:8px!important;cursor: pointer;border: 1px solid #000;}
.minicolors-theme-bootstrap .minicolors-input{width:0px!important;border:0px!important;height:29px!important}
.minicolors-position-bottom .minicolors-panel{top:31px!important;left:-158px!important;}


/*容器和特殊部分组件的编辑器样式(不会影响生成的元素样式)*/
.template_v4_edit [edit_hint="true"]:hover{
    background: rgba(255, 255, 255, .3);
    padding: 3px;
    border: 1px dashed rgb(6 156 36 / 60%);
}

.template_v4_edit [edit_hint="true"]{
            min-height:1px;
            padding: 3px;
            /*box-sizing: border-box;*/ 
        }
            .hint{
                padding: 3px;
                border: 1px dashed rgb(6 156 36 / 60%);
            }
.template_v4_edit [edit_hint="true"]:hover{
                background: rgba(255,255,255,.3);
                padding: 3px;
                border: 1px dashed rgb(6 156 36 / 60%);
            }
            
[组件名称="链接"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed rgb(5 109 209);
    /*
    margin: 10px;
    padding: 5px;
    */
    
    min-width: 40px;
    min-height: 24px!important;
}
[组件名称="链接"][edit_hint="true"]:before{
    content: '链接';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed rgb(5 109 209);
    line-height: 14px;
    color: rgb(5 109 209);
}
[组件名称="Div容器"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed rgb(209 115 5);
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="Div容器"][edit_hint="true"]:before{
    content: 'Div容器';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed rgb(209 115 5);
    line-height: 14px;
    color: rgb(209 5 5);
}
[组件名称="Grid容器"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed rgb(209 115 5);
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="Grid容器"][edit_hint="true"]:before{
    content: 'Grid容器';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed rgb(209 5 5);
    line-height: 14px;
    color: rgb(209 5 5);
}
[组件名称="Flex容器"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed rgb(153 13 159);
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="Flex容器"][edit_hint="true"]:before{
    content: 'Flex容器';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed rgb(153 13 159);
    line-height: 14px;
    color: rgb(153 13 159);
}
[组件名称="右侧自适应"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed rgb(153 13 159);
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="右侧自适应"][edit_hint="true"]:before{
    content: '右侧自适应';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed rgb(153 13 159);
    line-height: 14px;
    color: rgb(153 13 159);
}

[组件名称="表单容器"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed rgb(9 159 142);
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="表单容器"][edit_hint="true"]:before{
    content: '表单容器';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed rgb(9 159 142);
    line-height: 14px;
    color: rgb(9 159 142);
}
[组件名称="列表组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="列表组件"][edit_hint="true"]:before{
    content: '列表组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}
[组件名称="分类组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="分类组件"][edit_hint="true"]:before{
    content: '分类组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}
[组件名称="标签组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="标签组件"][edit_hint="true"]:before{
    content: '标签组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}
[组件名称="评论组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="评论组件"][edit_hint="true"]:before{
    content: '评论组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}
[组件名称="最新文章组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="最新文章组件"][edit_hint="true"]:before{
    content: '最新文章组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}
[组件名称="最新回复组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="最新回复组件"][edit_hint="true"]:before{
    content: '最新回复组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}
[组件名称="相关文章组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="相关文章组件"][edit_hint="true"]:before{
    content: '相关文章组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}
[组件名称="随机文章组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="随机文章组件"][edit_hint="true"]:before{
    content: '随机文章组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}
[组件名称="归档组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="归档组件"][edit_hint="true"]:before{
    content: '归档组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}
[组件名称="热门文章组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="热门文章组件"][edit_hint="true"]:before{
    content: '热门文章组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}
[组件名称="侧栏分类组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="侧栏分类组件"][edit_hint="true"]:before{
    content: '侧栏分类组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}
[组件名称="侧栏标签组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="侧栏标签组件"][edit_hint="true"]:before{
    content: '侧栏标签组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}
[组件名称="上一篇组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="上一篇组件"][edit_hint="true"]:before{
    content: '上一篇组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}
[组件名称="下一篇组件"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed #e77b33;
    
    min-width: 100px;
    min-height: 24px!important;
}
[组件名称="下一篇组件"][edit_hint="true"]:before{
    content: '下一篇组件';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed #e77b33;
    line-height: 14px;
    color: #e77b33;
}

[miniproject_name="for循环"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed rgb(222 0 255);
    
    min-width: 100px;
    min-height: 24px!important;
}
[miniproject_name="for循环"][edit_hint="true"]:before{
    content: 'for循环';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed rgb(222 0 255);
    line-height: 14px;
    color: rgb(222 0 255);
}
[miniproject_name="if语句"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed rgb(0 72 255);
    
    min-width: 100px;
    min-height: 24px!important;
}
[miniproject_name="if语句"][edit_hint="true"]:before{
    content: 'if如果语句';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed rgb(0 72 255);
    line-height: 14px;
    color: rgb(0 72 255);
}
[miniproject_name="elif语句"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed rgb(0 72 255);
    
    min-width: 100px;
    min-height: 24px!important;
}
[miniproject_name="elif语句"][edit_hint="true"]:before{
    content: 'elif否则如果语句';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed rgb(0 72 255);
    line-height: 14px;
    color: rgb(0 72 255);
}
[miniproject_name="else语句"][edit_hint="true"]{
    position: relative!important;
    border: 1px dashed rgb(0 72 255);
    
    min-width: 100px;
    min-height: 24px!important;
}
[miniproject_name="else语句"][edit_hint="true"]:before{
    content: 'else否则语句';
    top: -9px;
    position: absolute;
    left: 10px;
    background: #fafafa;
    font-size: 12px;
    padding: 0px 5px;
    border: 1px dashed rgb(0 72 255);
    line-height: 14px;
    color: rgb(0 72 255);
}



/*组件编辑器后台*/
:root{
    --template_v4_cont_list_li_sort_list-height : 0px;
}
.options{
    display: flex;
    border-bottom: 1px solid #ccc;
}
.options_li{
    font-size: 16px;
    padding: 5px 30px;
    line-height: 30px;
    color: #fafafa;
    background: #ccc;
    margin: 10px;
    border-radius: 5px;
    cursor: pointer;
}
.options_li[value="edit"]{
    background: #0fab96;
}
.options_li[value="add"]{
    background: #0fab23;
}

.template_box{
    height: calc(100% - 0px - 61px);
}
.template_edit_box{
    height: 100%;
}
/*左侧组件列表容器*/
.template_add_top{
    display: flex;
    padding: 0px 20px;
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid #ccc;
    justify-content: space-between;
}
.template_v4_cont{
    height: calc(100% - 33px);
    display: flex;
}
.template_v4_cont_list{
    height: 100%;
    width: 200px;
    border-right: 1px solid #ccc;
    overflow: visible;
}
.template_v4_cont_box{
    flex: 1;
}
.template_v4_cont_list_title{
    border-bottom: 1px solid #ccc;
    padding: 10px;
    color: #333;
}
.template_v4_cont_list_li{
    overflow-y: auto;
    height: calc(100% - 42px);
}
.template_v4_cont_list_li_sort{
    position: relative;
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    cursor: pointer;
}
.template_v4_cont_list_li_sort_title{
    border-left: 5px solid #28a4ef;
    padding: 5px;
    color: #333;
}
.template_v4_cont_list_li_sort_list{
    display: none;
    border-top: 1px solid #ccc;
    overflow-y: auto;
    /* height: var(--template_v4_cont_list_li_sort_list-height); */
    height: 300px;
}
.template_v4_cont_list_li_sort_list_li{
    padding: 10px;
    color: #333;
    display:block;
}
[element_name="导航组件"]{
    width: 1400px;
}
.v4_组件信息{
    display: flex;
    align-items: center;
}
.v4_input_name{
    cursor: pointer;
    background: #28a4ef;
    font-size: 14px;
    color: #fafafa;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 5px;
    width: max-content;
    min-width: min-content;
    line-height: 12px;
}
.v4_input_text{
    min-width: 100px;
    width: max-content;
    font-size: 12px;
    margin: 5px;
    height: 22px;
    line-height: 22px;
    background: #f1f1f1;
}
.v4_click_save{
    cursor: pointer;
    background: #ef6e0f;
    font-size: 14px;
    color: #fafafa;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 5px;
    width: max-content;
    min-width: min-content;
    line-height: 12px;
}



/*单选开关样式*/
.列表组件_配置开关{
    font-size: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 40px;
    margin-left: 10px;
    height: 20px;
    background: #ddd;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 3px;
}
.列表组件_配置开关:after{
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background: #fff;
    -webkit-box-shadow: 0 0 0.25em rgba(0,0,0,.3);
    box-shadow: 0 0 0.25em rgba(0,0,0,.3);
    -webkit-transform: scale(.7);
    transform: scale(.7);
    left: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 3px;
}
.列表组件_配置开关:checked{
    background: rgb(51, 51, 51);
}
input[type="checkbox"].列表组件_配置开关:checked:after{
    left: calc(100% - 20px);
}

/*边框设置的四个选项*/
.action_border_status {
    float: right;
    margin: 6px;
    background: #ccc;
    height: 20px;
    line-height: 20px;
    padding: 0px 5px;
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
}
[option="本地图片URL"]{
    display: none;
}
/*template 全局图片容器*/ 
.picbox{
    width: 800px;
    height: 400px;
    top:100px;
    background: rgb(68, 68, 68);
    margin: 0 auto;
    position: absolute;
    z-index: 999999;
    display: none;
    left: calc(50% - 400px);
    overflow-y: auto;
}
.picbox_head{
    height: 32px;
    border-bottom: 1px solid #fafafa;
    color: #fafafa;
    line-height: 32px;
    padding-left: 10px;
    cursor: pointer;
}
.picbox_head span{
    float: right;
    margin-right: 10px;
    font-size: 14px;
    color: #ff7b74;
    cursor: pointer;
}
.picbox_content{
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.picbox_content_up{
    height: 120px;
    background: rgba(255, 255, 255, .2);
    line-height: 120px;
    text-align: center;
    color: #fafafa;
    border: 1px solid #bbb;
    cursor: pointer;
}
.picbox_content_li{
    position: relative;
}
.picbox_content_li img{
    width: 100%;
}
.picbox_content_li_del{
    position: absolute;
    top: 5px;
    right: 5px;
    color: #ff7b74;
    font-size: 14px;
    cursor: pointer;
}