@charset "utf-8";
/* CSS Document */

span.red{
	color:#F00;
}
.add-contact-box{
	width:98%;
	margin:0 auto;
	padding:10px 0;
	font-size:14px;
	text-align:left;
}
.add-contact-box h2{
	font-size:28px;
	line-height:30px;
	text-align:center;
	color:#000;
	margin-bottom:30px;
}
.add-contact-box .tips{
	padding:20px;
	background:#f5f5f5;
	border:1px solid #ccc;
	border-radius:5px;
	margin-bottom:20px;
}
.add-contact-box .bottomtips{
	padding:20px;
	border-radius:5px;
	margin-bottom:20px;
	margin-top: 10px;
}

.tipsborder{
	border: solid 1px #f00;
}

.add-contact-box form>div{
	padding-bottom:10px;
}
.add-contact-box form .tit{
	margin-bottom:5px;
}
.add-contact-box form .input-box{
	height:52px;
	border:1px solid #7a7a7a;
	box-sizing:border-box;
	width:100%;
	display:block;
	border-radius:4px;
	position:relative;
	padding:4px;
}
.add-contact-box form .describe{
	color:#999;
}
.add-contact-box form .line{
	height:1px;
	width:100%;
	background:#7a7a7a;
	padding:0;
	margin:15px 0;
}
.add-contact-box form .radio,
.add-contact-box form .checkbox{
	padding:10px 0;
	display: flex;
    flex-wrap: wrap;
}
.add-contact-box form .radio label,
.add-contact-box form .checkbox label{
	position:relative;
	padding-left:10px;
	cursor:pointer;
	width: 33.333%;
    box-sizing: border-box;
    margin: 5px 0;
}
.add-contact-box form .radio input,
.add-contact-box form .checkbox input{
	opacity:0;
}
.add-contact-box form .radio label svg,
.add-contact-box form .checkbox svg{
	opacity:0;
	position:absolute;
	left:0;
	top:0;
	height:20px;
	width:20px;
	fill:#7a7a7a;
}
.add-contact-box form .radio label:before,
.add-contact-box form .checkbox label:before{
	border:1px solid #7a7a7a;
	height:20px;
	width:20px;
	border-radius:50%;
	content: "";
	display:inline-block;
	box-sizing:border-box;
	position:absolute;
	left:0;
	top:0;
}
.add-contact-box form .checkbox label:before{
	border-radius:3px;
}
.add-contact-box form .radio input:checked~svg,
.add-contact-box form .checkbox input:checked~svg{
	opacity:1;
}


.add-contact-box form .select-box .text{
	padding-right:40px;
}
.add-contact-box form .select-box .text span{
	display:inline-block;
	line-height:40px;
}
.add-contact-box form .select-box .text svg{
	position:absolute;
	right:15px;
	top:18px;
	fill:#000;
}
.add-contact-box form .select-box{
	position:relative;
	cursor:pointer;
}
.add-contact-box form .select-box .select-down{
    width: 100%;
    border: 1px solid #7a7a7a;
    border-top: none;
    position: absolute;
    left: 0;
    top: 52px;
    display: none;
    overflow: auto;
    overflow-x: hidden;
    z-index: 9999;
	max-height:160px;
	box-sizing:border-box;
}
.add-contact-box form .select-box .select-down li{
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #D4D4D4;
    color: #606060;
    text-align: left;
	
}
.add-contact-box form .notes .input-box{
	height:200px;
}

.add-contact-box form .register-code{
	overflow:hidden;
}
.add-contact-box form .register-code .input-box{
	width:60%;
	float:left;
}
.add-contact-box form .register-code .code{
	border:2px solid #99eaff;
	height:52px;
	box-sizing:border-box;
	margin-left:2%;
	width:38%;
	float:left;
	padding:5px;
	border-radius:5px;
}
.add-contact-box form .submit-btn{
	background:#3c3c3c;
	color:#fff;
	display:block;
	line-height:50px;
	border-radius:5px;
	border:none;
	width:100%;
	cursor: pointer;
}

.popupcontent{
	display: none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.3);
	z-index:919000;
}

.popupcontent .content{
	background-color: #fff;
    z-index: 11;
    width: 35%;
    position:fixed;
    top:50%;
    left:50%;
    border: 1px solid #ccc;
    text-align: center;
    overflow:hidden;
	transform:translate(-50%,-50%);
	border-radius:8px;
}
.popupcontent .content-scroll{
	overflow:auto;
	max-height:400px;
}
.popupcontent .content-scroll::-webkit-scrollbar {
 width: 5px;
}
.popupcontent .content-scroll::-webkit-scrollbar-track {
 background-color:#999;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
.popupcontent .content-scroll::-webkit-scrollbar-thumb {
 background-color:#666;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}


.popupcontent .content h5{
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    color: #000;
    margin-top: 30px;
}

.popupcontent .content .popup_content{
	padding:20px;
	border-radius:5px;
	margin-bottom:20px;
	margin-top: 10px;
}

.popupcontent .popup_submit {
	text-decoration:none;
	text-align: center;
    background: #3c3c3c;
    color: #fff;
    display: inline-block;
    line-height: 50px;
    border-radius: 5px;
    border: none;
    width: 60%;
    margin-bottom: 30px;
}




.dropzone-area .dropzone-helper {
    margin-bottom: 15px;
    font-size: 13px;
    overflow: hidden;
}
.dropzone-area .dropzone-helper .browse-link-wrapper {
    display: inline-block;
	position:relative;
}
.dropzone-area input.file1 {
    opacity: 0;
    position: absolute;
    height: 45px;
    width: 135px;
    cursor: pointer;
}
.dropzone-area span.file2 {
    display: inline-block;
    width: auto;
    height: 44px;
    line-height: 46px;
    background: #e9e9e9;
    padding: 0 20px 0 60px;
    box-sizing: border-box;
    color: #333;
    font-size: 14px;
    cursor: pointer;
}
.dropzone-area span.file2 svg {
    position: absolute;
    top: 5px;
    left: 15px;
    width: 34px;
    height: 34px;
    fill: #333;
}
.dropzone-area .dropzone-helper .browse-hint-wrapper {
    float: right;
    color: #6c7378;
	padding-top:15px;
}

.dropzone-area .template{
    margin-bottom: 5px;
    overflow: hidden;
}
.dropzone-area .fileattr {
    float: left;
}
.dropzone-area .fileattr {
    float: left;
}
.dropzone-area .dz-remove {
    float: right;
    background: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNTU2MDAzMzc5Nzc3IiAgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjUwNTYiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4Ij48cGF0aCBkPSJNMzgyLjMyMDI3NCA0MDUuMzU3NzE0djM4NGEyMC42MjYyODYgMjAuNjI2Mjg2IDAgMCAxLTIxLjU3NzE0MyAyMS4yODQ1NzJIMzE3LjQ0MjU2YTIwLjYyNjI4NiAyMC42MjYyODYgMCAwIDEtMjEuNTc3MTQzLTIxLjM1NzcxNXYtMzg0YTIwLjYyNjI4NiAyMC42MjYyODYgMCAwIDEgMjEuNTc3MTQzLTIxLjI4NDU3MWg0My4xNTQyODZhMjAuNjI2Mjg2IDIwLjYyNjI4NiAwIDAgMSAyMS41NzcxNDMgMjEuMzU3NzE0aDAuMDczMTQyeiBtMTcyLjkwOTcxNSAwdjM4NGEyMC42MjYyODYgMjAuNjI2Mjg2IDAgMCAxLTIxLjY1MDI4NiAyMS4yODQ1NzJoLTQzLjE1NDI4NmEyMC42MjYyODYgMjAuNjI2Mjg2IDAgMCAxLTIxLjU3NzE0My0yMS4zNTc3MTV2LTM4NGEyMC42MjYyODYgMjAuNjI2Mjg2IDAgMCAxIDIxLjU3NzE0My0yMS4yODQ1NzFoNDMuMTU0Mjg2YTIwLjYyNjI4NiAyMC42MjYyODYgMCAwIDEgMjEuNTc3MTQzIDIxLjM1NzcxNHogbTE3Mi45MDk3MTQgMHYzODRhMjAuNjI2Mjg2IDIwLjYyNjI4NiAwIDAgMS0yMS42NTAyODYgMjEuMjg0NTcyaC00My4xNTQyODZhMjAuNjI2Mjg2IDIwLjYyNjI4NiAwIDAgMS0yMS41NzcxNDItMjEuMzU3NzE1bC0wLjA3MzE0My0zODRhMjAuNjI2Mjg2IDIwLjYyNjI4NiAwIDAgMSAyMS41NzcxNDMtMjEuMjg0NTcxaDQzLjIyNzQyOGEyMC42MjYyODYgMjAuNjI2Mjg2IDAgMCAxIDIxLjU3NzE0MyAyMS4zNTc3MTR6IG04Ni4zODE3MTQgNDgyLjY2OTcxNVYyNTZIMjA5LjQ4MzcwM3Y2MzEuOTU0Mjg2YTc0LjgyNTE0MyA3NC44MjUxNDMgMCAwIDAgMTQuNDgyMjg2IDQ1LjA1NmMzLjM2NDU3MSAzLjgwMzQyOSA1Ljc3ODI4NiA1LjYzMiA3LjA5NDg1NyA1LjYzMmg1NjEuODgzNDI4YzEuMzE2NTcxIDAgMy42NTcxNDMtMS44Mjg1NzEgNy4wOTQ4NTctNS42MzJhNzQuODI1MTQzIDc0LjgyNTE0MyAwIDAgMCAxNC41NTU0MjktNDQuOTgyODU3ek0zNjAuNzQzMTMxIDE3MC42NDIyODZoMzAyLjUxODg1OGwtMzIuNDAyMjg2LTc3Ljk3MDI4NmExOS4wMTcxNDMgMTkuMDE3MTQzIDAgMCAwLTExLjQ4MzQyOS03LjMxNDI4Nkg0MDUuMjg3MTMxYTE5LjAxNzE0MyAxOS4wMTcxNDMgMCAwIDAtMTEuNDgzNDI4IDcuMzE0Mjg2bC0zMy4wNjA1NzIgNzcuOTcwMjg2ek05ODcuNDMxMTMxIDE5MnY0Mi42NDIyODZhMjAuNjI2Mjg2IDIwLjYyNjI4NiAwIDAgMS0yMS41NzcxNDIgMjEuMzU3NzE0aC02NC44Nzc3MTV2NjMxLjk1NDI4NmMwIDM2LjkzNzE0My0xMC41MzI1NzEgNjguNzU0Mjg2LTMxLjc0NCA5NS43NDQtMjEuMjExNDI5IDI2Ljg0MzQyOS00Ni41OTIgNDAuMzAxNzE0LTc2LjI4OCA0MC4zMDE3MTRIMjMxLjA2MDg0NmMtMjkuNjk2IDAtNTUuMTQ5NzE0LTEzLjAxOTQyOS03Ni4yODgtMzguOTg1MTQzLTIxLjIxMTQyOS0yNi4wMzg4NTctMzEuNzQ0LTU3LjQ5MDI4Ni0zMS43NDQtOTQuMzU0Mjg2VjI1Nkg1OC4xNTExMzFBMjAuNjI2Mjg2IDIwLjYyNjI4NiAwIDAgMSAzNi41NzM5ODkgMjM0LjY0MjI4NnYtNDIuNjQyMjg2YTIwLjYyNjI4NiAyMC42MjYyODYgMCAwIDEgMjEuNTc3MTQyLTIxLjM1NzcxNGgyMDguNjc2NTcyTDMxNC4xNTExMzEgNTkuMzE4ODU3YzYuNzI5MTQzLTE2LjQ1NzE0MyAxOC44NzA4NTctMzAuNDI3NDI5IDM2LjQyNTE0My00MS45ODQgMTcuNTU0Mjg2LTExLjU1NjU3MSAzNS40MDExNDMtMTcuMzM0ODU3IDUzLjM5NDI4Ni0xNy4zMzQ4NTdoMjE2LjA2NGMxNy45OTMxNDMgMCAzNS44NCA1Ljc3ODI4NiA1My4zOTQyODYgMTcuMzM0ODU3IDE3LjU1NDI4NiAxMS41NTY1NzEgMjkuNjk2IDI1LjYgMzYuNDI1MTQzIDQxLjk4NGw0Ny4zMjM0MjggMTExLjMyMzQyOWgyMDguNjc2NTcyYTIwLjYyNjI4NiAyMC42MjYyODYgMCAwIDEgMjEuNTc3MTQyIDIxLjM1NzcxNHoiIHAtaWQ9IjUwNTciIGZpbGw9IiM2NjY2NjYiPjwvcGF0aD48L3N2Zz4=") no-repeat 100% 0;
    cursor: pointer;
    display: block;
    height: 24px;
    width: 24px;
    margin-left: 25px;
}




@media screen and (max-width:768px){
	.add-contact-box form .radio label,
	.add-contact-box form .checkbox label{
		width:33.3333%;
	}
	.popupcontent .content{
		width:80%;
	}
	.popupcontent .popup_submit{
		display:inline-block !important;
		width:calc(100% - 40px);
		color:#fff !important;
	}
}
@media screen and (max-width:480px){
	.add-contact-box form .radio label,
	.add-contact-box form .checkbox label{
		width:100%;
	}
}

.template_style_red{
    background: #ff2452 !important;
}
.template_style_orange{
    background: #ff8542 !important;
}
.template_style_green{
    background: #089b32 !important;
}
.template_style_blue{
    background: #428fff !important;
}
.template_style_purple{
    background: #c942ff !important;
}
.template_style_pink{
    background: #fb6cb1 !important;
}
.template_style_black{
    background: #333 !important;
}
.template_style_yellow{
    background: #fbd540 !important;
}
.template_style_orange_yellow{
    background: #fe9a04 !important;
}
.template_style_magenta{
    background: #fa039c !important;
}
.template_style_light_brown{
    background: #6b473c !important;
}
.template_style_brown{
    background: #843900 !important;
}
.template_style_brown_green{
    background: #666400 !important;
}
.template_style_light_green{
    background: #b2d235 !important;
}
.template_style_dark_green{
    background: #029834 !important;
}
.template_style_light_blue{
    background: #2c6dff !important;
}
.template_style_dark_blue{
    background: #32339f !important;
}
.template_style_light_purple{
    background: #d27fff !important;
}
.template_style_dark_purple{
    background: #b600ff !important;
}
.template_style_cyan{
    background: #009ad6 !important;
}
.template_style_cyan_green{
    background: #00ae9d !important;
}
.template_style_cyan_blue{
    background: #102b6a !important;
}