/*flex兼容写法*/
/* 定义 */
.flex-def {display: -webkit-flex; display: flex; }
/* 主轴居中 */
.flex-zCenter {-webkit-justify-content: center;justify-content: center;}
/* 主轴居中 */
.flex-zAround {-webkit-justify-content: space-around;justify-content: space-around;}
/* 主轴两端对齐 */
.flex-zBetween {-webkit-justify-content: space-between;justify-content: space-between;}
/* 主轴end对齐 */
.flex-zEnd {-webkit-justify-content: flex-end;justify-content: flex-end;}
/* 主轴start对齐 */
.flex-zStart {-webkit-justify-content: start;justify-content: start;}
/* 侧轴居中 */
.flex-cCenter {-webkit-align-items: center;align-items: center;}
/* 侧轴start对齐 */
.flex-cStart {-webkit-align-items: start;align-items: start;}
/* 侧轴底部对齐 */
.flex-cEnd {-webkit-align-items: flex-end;align-items: flex-end;}
/* 侧轴文本基线对齐 */
.flex-cBaseline {-webkit-align-items: baseline;align-items: baseline;}
/* 侧轴上下对齐并铺满 */
.flex-cStretch {-webkit-align-items: stretch;align-items: stretch;}
/* 主轴从上到下 */
.flex-zTopBottom {-webkit-flex-direction: column;flex-direction: column;}
/* 主轴从下到上 */
.flex-zBottomTop {-webkit-flex-direction: column-reverse;flex-direction: column-reverse;}
/* 主轴从左到右 */
.flex-zLeftRight {-webkit-flex-direction: row;flex-direction: row;}
/* 主轴从右到左 */
.flex-zRightLeft {-webkit-flex-direction: row-reverse;flex-direction: row-reverse;}
/* 是否允许子元素伸缩 */
.flex-item {-webkit-flex-grow: 1;flex-grow: 1;}
/*子元素换行*/
.flex-wrap {-moz-flex-wrap:wrap;flex-wrap:wrap;}
/* 子元素的显示次序 */
.flex-order{-webkit-order: 1;order: 1;}
/*元素比例*/
.flex-one{-webkit-flex: 1; flex: 1;}

.tooltip{
	z-index: 1000 !important;
}
.modal-top .top-img{
    width: 18px;
    height: 18px;
    margin-right: 8px;
}
.modal-top .top-text{
    font-size: 14px;
    color: rgba(48, 49, 51, 0.75);
    margin-right: 37px;
}
.modal-list {
	width: 360px;
	/*float: left;*/
}

/*.modal-list .modal-list-top {*/
/*	text-align: center;*/
/*	background-color: #f1f4f5;*/
/*	font-size: 14px;*/
/*	border-bottom: solid 1px #dbdbdb;*/
/*	line-height: 40px;*/
/*}*/

.modal-box{
    height: calc(100% - 252px);
}

.modal-list .modal-list-content {
	background-color: #FFF;
	overflow: hidden;
}

.modal-list .modal-list-title{
    height: 56px;
    border-bottom: solid 1px #dbdbdb;
    box-sizing: border-box;
}

.modal-list .modal-list-title .text{
    margin-right: 32px;
    cursor: pointer;
    font-size: 16px;
}

.modal-list .modal-list-title .text.no-active{
    color: #222222;
}

.modal-list .modal-list-nav{
    position: relative;
    height: calc(100% - 56px);
    overflow-x: hidden;
	overflow-y: scroll;
}

.modal-list .modal-list-nav::-webkit-scrollbar {
    display: none;
}

.modal-list .modal-list-nav .text{
    padding: 20px 24px;
	box-sizing: border-box;
	font-size: 15px;
	color: #303133;
	position: relative;
	z-index: 1;
}

.modal-list .modal-list-nav .text .line{
    width: 30px;
    height: 4px;
    background-color: #62a8ea;
    position: absolute;
    left: 24px;
    bottom: 25px;
    z-index: -1;
}

.modal-list .modal-list-tab{
    padding: 0 24px;
}

.modal-list .modal-list-tab li {
	width: 96px;
	height: 82px;
	margin-right: 12px;
	margin-bottom: 12px;
	text-align: center;
	cursor: pointer;
	border: 1px dashed #EBEEF5;
	border-radius: 8px;
	position: relative;
}
.modal-list .modal-list-tab li:nth-child(3n){
    margin-right: 0;
}
.modal-list .modal-list-tab li.new::after{
    content: "new";
    display: block;
    padding: 1px 4px;
    background-color: #F62340;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    text-align: center;
    line-height: 11px;
    color: #fff;
    font-size: 8px;
    position: absolute;
    top: 0;
    left: 0;
}

.modal-list .modal-list-tab li img {
	display: block;
	width: 76px;
    height: 42px;
	margin: 8px auto 0;
}

.modal-list .modal-list-tab li p {
	line-height: 30px;
	margin-bottom: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modal-list-nav li {
	line-height: 40px;
	text-align: center;
	border-top: solid 1px #dbdbdb;
	cursor: pointer;
}

.modal-list-nav>div:first-child li{
	border-top: none;
}

.modal-section {
	/*width: calc(100% - 275px);*/
	width: calc(100% - 360px);
	padding-left: 40px;
	float: left;
}
.min-width-1350{
	min-width: 1350px!important;
	overflow-x:scroll;
}

.phone-box {
	width: 375px;
	background-color: #FFF;
	/*border: solid 1px #dbdbdb;*/
	/*float: left;*/
	box-shadow: 0 1px 30px 1px rgb(0 0 0 / 7%);
}

.phone_list {
	position: relative;
	z-index: 1;
	min-height: 10px;
}

.phone_list.active>.type-action {
	border: 1px solid #579EE7;
}

.phone_list:hover .type-action{
	border: 1px solid #579EE7;
}

.type-action {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 111;
	cursor: move;
	box-sizing: border-box;
}

.del-btn {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 18px;
	height: 18px;
	background: rgba(0, 0, 0, .12);
	z-index: 112;
	cursor: pointer;
}

.del-btn .del-img{
    display: block;
    width: 12px;
    height: 12px;
    margin: 3px auto 0;
}

.phone-box .phone-box-header {
	height: 63px;
	/*background-image: url("../images/phone_box_header.jpg");*/
	background-image: url("../images/phone_box_header.png");
	background-size: 100% 100%;
}

.phone-box .WSY_midddle {
	height: calc(100% - 63px);
	position: relative;
	overflow-y: scroll;
}

.phone-box .WSY_midddle::-webkit-scrollbar {
    display: none;
}

.control-box {
	width: 486px;
	height: 100%;
	overflow-y: scroll;
}

.control-box .control-title{
    height: 56px;
    line-height: 56px;
    font-size: 15px;
    color: #303133;
    width: 100%;
    padding: 0 24px;
    border-bottom: 1px solid #EBEEF5;
    box-sizing: border-box;
}

.control-box::-webkit-scrollbar {
    display: none;
}

.control-box .control,.control-box .bottom-control {
	/*border: solid 1px #dbdbdb;*/
	/*min-width: 500px;*/
	width: 100%;
	min-height: 100%;
	display: inline-block;
	border-radius: 3px;
}

.control-box .text-title {
	background-color: #f1f4f5;
	padding: 0 20px;
	line-height: 40px;
	font-size: 14px;
	border-bottom: solid 1px #dbdbdb;
	color: #474747;
}

.control-box .border-top {
	border-top: solid 1px #dbdbdb;
}

.control-box .control-infor {
	padding: 10px;
	background-color: #FFF;
	position: relative;
}

.control-box .control-list {
	overflow: hidden;
	padding: 0px 10px;
	margin: 10px 0;
}

.control-box .control-list .control-label {
	float: left;
	min-width: 80px;
	text-align: right;
	line-height: 28px;
	color: #474747;
}

.control-box .dataset-list .control-list .control-label {
	min-width: 100px;
}

.control-box .dataset-list .control-list{
	margin-top: 20px;
}

.control-box .dataset-list .control-list .control-form{
	margin-left: 115px;
}

.control-box .control-list .dast-label {
	min-width: 60px;
	float: left;
	text-align: right;
	line-height: 28px;
	color: #474747;
}

.control-box .control-list .dast-form {
	margin-left: 75px;
}

.control-box .control-list .control-form {
	margin-left: 95px;
	min-height: 32px;
}

.control-box .control-list .radio-custom {
	line-height: 18px;
}

/*.control-box .control-list input[type=text] {
	width: auto;
}*/

/*.control-box .control-list select {
	width: auto;
	min-width: 150px;
}*/

.control-box .dataset-list {
	border: solid 1px #dbdbdb;
	border-radius: 3px;
	margin-bottom: 10px;
	position: relative;
	padding: 20px 10px 10px;
}

.control-box .dataset-list .edit-menu {
	position: absolute;
	top: 10px;
	right: 0;
	padding: 0 10px;
}

.control-box .dataset-list .edit-menu i {
	font-size: 18px;
	cursor: pointer;
}

.bottom-menu {
	padding: 15px;
	position: fixed;
	bottom: 0;
	left: 20px;
	width: calc(100% - 40px);
	border-top: solid 1px #ddd;
	background-color: #FFF;
	text-align: center;
	z-index: 300;
}

.sortable-list {
	cursor: move;
	position: relative;
}

.control-form .slider.slider-horizontal {
	margin: 5px 0 0 0!important;
}

.overflowvis {
	overflow: visible!important;
}

.members_imgad .img-box {
	display: block;
}

.line-height-28 {
	line-height: 28px;
}

.padding-left-f20 {
	padding-left: 0;
}

.img-default {
	width: 100%;
	height: 100%;
	background-color: #eee;
	position: relative;
	left: 0;
	top: 0;
}

.img-default:before {
	content: '';
	display: block;
	position: absolute;
	width: 4px;
	height: 30px;
	background-color: #bbb;
	margin-left: -2px;
	margin-top: -15px;
	left: 50%;
	top: 50%;
}

.img-default:after {
	content: '';
	display: block;
	position: absolute;
	width: 30px;
	height: 4px;
	background-color: #bbb;
	margin-left: -15px;
	margin-top: -2px;
	left: 50%;
	top: 50%;
}

.slider-mod {
	width: 86%;
}

.pxspan {
	display: inline-block;
	vertical-align: bottom;
	margin-left: 15px;
}

.classify-img {
	height: 215px;
	display: inline-block;
	vertical-align: top;
}

.classify-right {
	display: inline-block;
	vertical-align: top;
}

.input-daterange .input-group {
	margin-bottom: 15px;
}

.sortdraglist {
	cursor: move;
}
.margin-left-120{
	margin-left: 120px !important;
}

.btn.dataset-add{
	min-width: 40px;
	width: 40px;
	height: 40px;
	display: block;
	padding: 0;
	margin: 0 auto;
	line-height: 40px;
	border-radius: 50%;
}

.move-tips{
	position: relative;
}
.move-tips:after{
	content: "按住可拖动调顺序";
	position: absolute;
	display: none;
	top: -40px;
	left: 0;
	line-height: 30px;
	color: #FFF;
	font-size: 12px;
	background-color: rgba(0,0,0,0.8);
	border-radius: 3px;
	padding: 0 15px;
	min-width: 60px;
	white-space: nowrap;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	text-align: center;
}
.move-tips:before{
	content: "";
	position: absolute;
	display: none;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
	top: -10px;
    left: 50%;
    margin-left: -5px;
    border-width: 4px 4px 0;
    border-top-color: rgba(0, 0, 0, .8);
}
.move-tips:hover:after{
	display: block;
}
.move-tips:hover:before{
	display: block;
}
/*图片上传*/

.imgup-mod {
	border: 1px solid #e4eaec;
	display: inline-block;
}

.frame_image {
	width: auto;
	height: 80px;
	display: inline-block;
	position: relative;
	z-index: 1;
	min-width: 80px;
}

.frame_image img {
	width: auto;
	height: 100%;
}

.frame_image .frame_image_select {
	width: 100%;
	height: 80px;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	cursor: pointer;
}

.frame_image .frame_image_hint {
	width: 100%;
	height: 20px;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	color: #fff;
	font-size: 12px;
	text-align: center;
	line-height: 20px;
}

.frame_image:hover .frame_image_hint {
    height: 80px;
    line-height: 80px;
}

.color-show{
	width: 16px;
	height: 16px;
}
.module-title{
	padding: 8px 24px 20px;
    margin: 0;
    line-height: 1;
    font-size: 14px;
    color: #303133;
}

/*右侧控制端样式start*/
.control-box .text-title-new {
	padding: 0 24px;
	line-height: 40px;
	color: #333;
	font-weight: 600;
}

.control-box .text-title-new span{
    font-size: 10px;
    color: #909399;
}

.control-box .border-bottom {
	border-bottom: solid 1px #F0F2F7;
}

.control-box .control-tab{
    padding: 0 24px;
}

.control-box .control-style{
    overflow: hidden;
    margin-right: 12px;
}

.control-box .control-style label{
    cursor: pointer;
    margin-bottom: 0;
}

.control-box .control-style .style-img{
    padding: 4px 8px;
	width: 96px;
	height: 46px;
	font-size: 0;
	border: 1px solid #EBEEF5;
	border-radius: 4px;
}

.control-box .control-style .style-img.active{
    border-color: #579EE7;
}

.control-box .control-style .style-img img{
    width: 80px;
    height: 38px;
}

.control-box .control-style .style-text{
    margin-top: 8px;
    font-size: 10px;
    color: #909399;
    line-height: 1;
}

.control-box .control-infor-new{
    padding: 0 42px 0 24px;
}

.control-box .control-list-new{
    margin: 10px 0;
}

.control-box .control-label-new{
    min-width: 60px;
    line-height: 28px;
    color: #606266;
    margin-right: 16px;
}

.control-box .control-form-new{
    min-height: 32px;
}

.control-box .control-form-new .slider{
    margin: 0;
}

.control-box .control-form-new .tooltip{
    display: none;
}

.control-box .control-form-new .slider-mod{
    width: 83%;
    padding-top: 12px;
}

.control-box .control-form-new .pxspan-new{
    display: inline-block;
    margin-left: 10px;
    width: 48px;
    height: 26px;
    line-height: 26px;
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    font-size: 12px;
    color: #333;
    text-align: center;
    vertical-align: middle;
}

.control-box .frame_image_new{
    width: 150px;
    min-height: 84px;
    background: #f8f8f8;
    position: relative;
    z-index: 1;
    border: 1px solid #EBEEF5;
    border-radius: 2px;
    padding: 6px;
    box-sizing: border-box;
    overflow: hidden;
}

.control-box .frame_image_new.sort{
    width: 84px;
}

.control-box .frame_image_new img{
    width: 100%;
}

.control-box .frame_image_new .frame_image_select{
    width: 100%;
    height: 100%; 
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
}

.control-box .imgup-text{
    padding-top: 6px;
    margin-left: 16px;
    font-size: 12px;
    color: #909399;
    line-height: 20px;
    max-width: 140px;
}

.control-box .dataset-list-new{
    border: solid 1px #EBEEF5;
    border-radius: 8px;
    margin-bottom: 16px;
    position: relative;
    padding: 16px;
}

.control-box .dataset-list-new .edit-menu-new{
    margin-bottom: 16px;
}

.control-box .dataset-list-new .move-text-new{
    font-size: 14px;
    color: #606266;
}

.control-box .dataset-list-new .move-tips-new img{
    width: 18px;
    height: 18px;
}

.control-box .dataset-list-new .move-tips-new img.delete{
    margin-right: 6px;
    cursor: pointer;
}

.control-box .control-new-btn{
    border: 1px solid #EDEFF5;
    border-radius: 8px;
    background-color: #FAFAFC;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

.control-box .control-new-btn .btn-title img{
    width: 11px;
    height: 11px;
    margin-right: 5px;
}

.control-box .control-new-btn .btn-title .text{
    font-size: 12px;
    color: #909399;
    line-height: 1;
}

.control-box .control-new-btn .btn-text{
    font-size: 8px;
    color: #909399;
    line-height: 1;
    margin-top: 8px;
}

.line-height-1{
    line-height: 1;
}

.control-box .control-infor-new .hotspot-img-new{
    display: block;
    width: 100%;
    border-radius: 8px;
}
.control-box .control-infor-new .img-preview-new{
    height: 200px;
    background-color: #FAFAFC;
    border: 1px dashed #EDEFF5;
    font-size: 14px;
    color: #D8D6DB;
    border-radius: 8px;
}
.control-box .control-infor-new .hotspot-box{
    position: relative;
    width: 88px;
    height: 88px;
    background-color: #FAFAFC;
    border: 1px dashed #EDEFF5;
    border-radius: 8px;
}
.control-box .control-infor-new .hotspot-box .hotspot-img{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.control-box .control-infor-new .hotspot-box .hotspot-del{
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 5;
    cursor: pointer;
}
.control-box .control-infor-new .hotspot-imgup-mod{
    width: 100%;
    height: 100%;
}
.control-box .control-infor-new .hotspot-imgup-mod .hotspot-add{
    width: 16px;
    height: 16px;
    display: block;
}
.control-box .control-infor-new .hotspot-imgup-mod .hotspot-text{
    margin-top: 8px;
    color: #909399;
    font-size: 14px;
    line-height: 1;
}
.control-box .control-infor-new .hotspot-imgup-mod .hotspot-image-select{
    width: 100%;
    height: 100%; 
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
}
/*编辑热区弹窗start*/
.edit-hotspot-pop{
    position: fixed;
    left: 0;
    top: 77px;
    width: 100%;
    height: calc(100vh - 140px);
    background-color: #f2f2f6;
    z-index: 1000;
}
.edit-hotspot-pop .edit-hotspot-box{
    width: 100%;
    height: 100%;
}
.edit-hotspot-pop .edit-hotspot-content{
    height: calc(100% - 54px);
}
.edit-hotspot-pop .edit-hotspot-content .content-left{
    overflow-y: scroll;
}
/* 热区容器 */
.edit-hotspot-pop .edit-hotspot-content .content-left .hotspot-container{
    position: relative;
    box-sizing: border-box;
    user-select: none;
    cursor: crosshair;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .hotspot-image{
    display: block;
    width: 750px;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .hotspot-selection-box {
    position: absolute;
    border: 1px dashed #3b82f6;
    background-color: rgba(59, 130, 246, 0.2);
    pointer-events: none;
    z-index: 100;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .hotspot-item{
    position: absolute;
    cursor: move;
    background-color: rgba(54, 157, 255, 0.60);
    border: 1px dashed #1890FF;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .hotspot-item.selected{
    z-index: 10;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .resize-handle{
    position: absolute;
    width: 9px;
    height: 9px;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .resize-handle.nw{
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .resize-handle.ne{
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .resize-handle.sw{
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .resize-handle.se{
    bottom: 0;
    right: 0;
    cursor: se-resize;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .resize-handle .hotspot-line{
    width: 6px;
    height: 6px;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .resize-handle.se .hotspot-line{
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    position: absolute;
    right: 3px;
    bottom: 3px;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .hotspot-label{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .hotspot-label .hotspot-text{
    color: #fff;
    white-space: nowrap;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .hotspot-label .hotspot-hint{
    color: #51E764;
    white-space: nowrap;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .hotspot-label .hotspot-hint.red{
    color: #F24F4C;
}
.edit-hotspot-pop .edit-hotspot-content .content-left .hotspot-del{
    width: 16px;
    height: 16px;
    background-color: #0079FF;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    cursor: auto;
}
/*编辑热区弹窗end*/
/*右侧控制端样式end*/

.slider-handle{
	border-color: #62a8ea;
}

/*popover弹窗start*/
.new-popover{
    position: relative;
    cursor: pointer;
}
.new-popover .new-popover-content{
    padding: 10px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    position: absolute;
    bottom: 35px;
    right: -80px;
    z-index: 5;
    display: none;
}
.new-popover:hover .new-popover-content{
    display: block;
}
.new-popover .new-popover-content:before{
    content: "";
    width: 0px;
    height: 0px;
    border-top: 10px solid #d9d9d9;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    bottom: -10px;
    right: 77px;
}
.new-popover .new-popover-content:after{
    content: "";
    width: 0px;
    height: 0px;
    border-top: 9px solid #FFFFFF;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    position: absolute;
    bottom: -9px;
    right: 78px;
}
.new-popover .new-popover-content.popover-width-sm{
    width: 250px;
}
.new-popover .new-popover-content.popover-width-lg{
    width: 476px;
}
.new-popover .new-popover-content .new-popover-scroll{
    max-height: 500px;
    overflow-y: scroll;
}
.new-popover .new-popover-content .new-popover-scroll::-webkit-scrollbar {
    display: none;
}
.new-popover .new-popover-content .new-popover-text{
    font-size: 14px;
    color: #333;
    line-height: 1.3;
    word-break: break-all;
    white-space: normal;
}
.new-popover .new-popover-content .new-popover-img{
    display: block;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}
/*popover弹窗end*/