div:focus, input:focus, textarea:focus, select:focus, button:focus{
        outline: none;
    }

* {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
a{
	cursor: url("../numix-cursor/Numix Dark/Hand.cur"), auto;
}

::-webkit-scrollbar {
    width: 0px;
   	background: transparent; /* make scrollbar transparent */
}

input{
	cursor: url("../numix-cursor/Numix Dark/IBeam.cur"), auto;
}

body{
	-webkit-tap-highlight-color: transparent;
	background-image: url("../image/back.png");
	background-repeat: repeat;
	background-size: 50% 70%;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	cursor: url("../numix-cursor/Numix Dark/Arrow.cur"), auto;
}

.pageContainer{
	overflow: scroll;
	width: 100%;
	height: 102%;
	position: fixed;
	top: 0;
	left: 0;
	scrollbar-width: none;
}
.pageContainer:active{
	cursor: url("../numix-cursor/Numix Dark/SizeAll.cur"), auto;
}
.mapContainer{
	zoom: 1;	
	transform-origin: 0 0;
	padding: 2000px;
}

.main{
	width: max-content;
	margin-left: 10px;
	margin-right: 10px;
	background-image: url("../image/cube.png");
	background-position: 100% 100%;
	background-size: 0px 0px;
	background-repeat: no-repeat;
	
}
.member, .family{
	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
}
.family{
	border-top: 2px solid grey;
	border-radius: 20px;
}
.back{
	height: 170px;
	background-image: url("../image/male.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin-left: 5px;
	opacity: 0;
	padding-top: 10px;
}

@keyframes animateBack{
	0%{
		opacity: 0;
		padding-top: 100px;
	}
	100%{
		opacity: 1;
		padding-top: 0;
	}
}


.wife{
	background-image: url("../image/female.png");
}
.male{
	margin-top: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 10px;
	width: 100px;
	height: 120px;
	box-shadow: 0px 0px 10px -5px black;
	/*background-image: linear-gradient(lightblue , white);*/
	background-image: linear-gradient(#36d1dc , #5b86e5);
}
.male:hover{
	background-image: linear-gradient(#b06ab3 , #4568dc);
	cursor: url("../numix-cursor/Numix Dark/Hand.cur"), auto;
}
.male:active{
	background-image: linear-gradient(#4568dc , #b06ab3);
}

.female{
	margin-top: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 10px;
	width: 100px;
	height: 120px;
	box-shadow: 0px 0px 10px -5px black;
	/*background-image: linear-gradient(pink , white);*/
	background-image: linear-gradient(#ff512f , #dd2476)
}
.female:hover{
	background-image: linear-gradient(#dd2476 , #ff512f);
	cursor: url("../numix-cursor/Numix Dark/Hand.cur"), auto;
}
.female:active{
	background-image: linear-gradient(#ff512f , #dd2476);
}

.img{
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 60px;
	height: 60px;
	margin-top: 10px;
	border-radius: 60px;
	box-shadow: 0px 0px 10px -5px black;
	opacity: 0;
	
    animation-name: animateImg;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-fill-mode: forwards;
}

@keyframes animateImg{
	0%{
		opacity: 0;
		transform: rotate(0deg);
	}
	100%{
		opacity: 1;
		transform: rotate(360deg);
	}
}
.detail{
	color: white;
	margin-top: 10px;
	font-size: 12px;
	text-shadow: 0px 0px 1px grey;
	font-weight: bold;
}
.age{
	font-size: 10px;
	color: white;
	font-weight: normal;
}

.sidepanel{
	position: fixed;
	z-index: 99;
	width: 350px;
	top: 15;
	left: 15;
}
.searchBar,.selectBar{
	width: 350px;
	padding-bottom: 10px;
	border-radius: 10px;
	box-shadow: 0px 0px 10px -5px black;
	background-color: white;
}
.otherOption{
	margin-top: 20px;
	width: 350px;
	height: 100px;
	border-radius: 10px;
	box-shadow: 0px 0px 10px -5px black;
	background-color: white;
}
.search{
	width: 100%;
	height: 45px;
	border-radius: 10px 10px 0 0;
	box-shadow: 0px 0px 7px -5px black;
}
.searchImage{
	margin-left: 12px;
	margin-top: 13px;
	float: left;
}
.searchImage img{
	width: 20px;
	height: 20px;
	opacity: .5;
}
.searchBox{
	float: left;
	margin-top: 7px;
	margin-left: 12px;
}
.searchBox input{
	width: 290px;
	text-align: left;
	font-size: 15px;
	color: gray;
	border-radius: 5px;
	height: 31px;
	background-color: transparent;
	border-width: 0;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	padding-left: 10px;
	padding-right: 10px;
	background-color: whitesmoke;
}
.addMember{
	width: 50px;
	height: 50px;
	position: fixed;
	z-index: 99;
	background-image: linear-gradient(to right,#4568dc,#e8554e);
	box-shadow: 0px 0px 10px -5px black;
	border-radius: 50px;
	bottom: 10px;
	right: 10px;
	cursor: url("../numix-cursor/Numix Dark/Hand.cur"), auto;
	background-image: url("../image/add.png");
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.addMember:hover{
	
	animation-name: rotateAddMember;
	animation-duration: .5s;
	animation-fill-mode: forwards;
}

@keyframes rotateAddMember{
	0%{
		background-size: 100% 100%;
		transform: rotate(0deg);
	}
	100%{
		background-size: 110% 110%;
		transform: rotate(360deg);
	}
}
.addMember:active{
	background-size: 100% 100%;
}
.userInfo{
	width: 280px;
	height: 50px;
	border-radius: 50px 0 0 50px;
	background-image: linear-gradient(to right, #36d1dc , #5b86e5);
	position: fixed;
	top: 20px;
	right: -220px;
	box-shadow: 0px 0px 10px -5px black;
	z-index: 99;
	animation-name: scrollUserNormal;
	animation-duration: .3s;
	animation-fill-mode: forwards;
}
.userInfo:hover{
	animation-name: scrollUserHover;
	animation-duration: .3s;
	animation-fill-mode: forwards;
}
@keyframes scrollUserHover{
	0%{
		right: -220px;
	}
	100%{
		right: 0px;
	}
}
@keyframes scrollUserNormal{
	0%{
		right: 0px;
	}
	100%{
		right: -220px;
	}
}



.userPhoto{
	float: left;
	background-image: url("../image/cube.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 50px;
	height: 50px;
	box-shadow: 0px 0px 10px -5px black;
	border-radius: 50px;
}

.userPhoto{
	animation-name: scrollPhotoHover;
	animation-duration: .3s;
	animation-fill-mode: forwards;
	animation-direction: reverse;
}

.userPhoto:hover{
	animation-name: scrollPhotoHover;
	animation-duration: .3s;
	animation-fill-mode: forwards;
}

@keyframes scrollPhotoHover{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.userData{
	float: left;
	margin-left: 15px;
	margin-top: 5px;
	color: white;
	margin-top: 8px;
	font-size: 15px;
	text-shadow: 0px 0px 1px grey;
	font-weight: bold;
}
.userName{
	
}
.userNumber{
	margin-top: 2px;
	font-size: 12px;
	color: white;
	font-weight: normal;
}
.menu{
	border-left: 1px solid black;
	float: right;
	width: 40px;
	height: 40px;
	background-image: url("../image/menu.png");
	background-position: center;
	background-size: 80% 80%;
	background-repeat: no-repeat;
	margin-right: 15px;
	margin-top: 5px;
	opacity: .5;
}
.menu:hover{
	opacity: .7;
	cursor: url("../numix-cursor/Numix Dark/Hand.cur"), auto;
}
.conMenu{
	padding: 10px;
	display: none;
	z-index: 999;
	border-radius: 10px;
	box-shadow: 0px 0px 10px -5px black;
	background-color: white;
	position: absolute;
	min-width: 150px;
	
}
.option{
	height: 28px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 5px;
	padding-top: 5px;
	color: gray;
	cursor: url("../numix-cursor/Numix Dark/Hand.cur"), auto;
}
.option:hover{
	background-color: whitesmoke;
}
.suggest{
	margin-top: 10px;
	max-height: 300px;
	overflow-y: scroll;
	scrollbar-width: none;
}
.searchMember{
	box-shadow: 0px 0px 6px -5px black;
	height: 60px;
	width: 350%;
	padding-top: 10px;
	padding-bottom: 10px;
	cursor: url("../numix-cursor/Numix Dark/Hand.cur"), auto;
}
.searchMember:hover{
	background-color: whitesmoke;
}
.searchMemberImagemale,.searchMemberImagefemale{
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 60px;
	height: 60px;
	border-radius: 60px;
	box-shadow: 0px 0px 10px -5px black;
	margin-left: 20px;
	float: left;
	
}
.searchMemberImagefemale{
}
.searchMemberDetail{
	float: left;
	margin-left: 15px;
	text-align: left;
	font-size: 13px;
	text-shadow: 0px 0px 1px grey;
	font-weight: bold;
	color: gray;
	overflow: hidden;
}
.selectBar{
	margin-top: 5%;
}
#maritalStateForm{
	display: none;
}

.connection-loader{
	display: none;
    justify-content: center;
    align-items: center;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 102%;
	background-color: rgba(255, 255, 255, .7);
	backdrop-filter: blur(5px);
	animation-name: backgroundFilter;
	animation-duration: .5s;
	animation-fill-mode: forwards;
}

.loader-image{
	width:200px;
	height: 208px;
	background-image: url("../image/loader-connect.gif");
	background-position: center;
	background-size: contain;
}

@media screen and (max-width: 550px){
	.otherOption{
		display: none;
	}
}