select:-webkit-autofill,
select:-webkit-autofill:hover, 
select:-webkit-autofill:focus, 
select:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

select { -webkit-appearance: none; }

.formContainer,.relationContainer{
	display: none;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 102%;
	background-color: rgba(255, 255, 255, .5);
	backdrop-filter: blur(2px);
	animation-name: backgroundFilter;
	animation-duration: .5s;
	animation-fill-mode: forwards;
}

@keyframes backgroundFilter{
	0%{
		background-color: rgba(255, 255, 255, 0);
		backdrop-filter: blur(0);
	}
	100%{
		background-color: rgba(255, 255, 255, .5);
		backdrop-filter: blur(2px);
	}
}
.formBack,.relationBack{
	width: 375px;
	border-radius: 10px;
	margin-top: 4%;
	background-color: white;
	box-shadow: 0px 0px 10px -5px black;
}

.formImage{
	border-radius: 10px 10px 0 0; 
	width: 100%;
	height: 20%;
	background-image: url("file:///C:/Users/Hateyou%20Roughly/Pictures/");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.blurEffect{
	padding-top: 10%;
	width: 100%;
	height: 90%;
	background-color: rgba(255, 255, 255, .5);
	backdrop-filter: blur(2px);
}
.userImage{
	position: relative;
	width: 90px;
	height: 90px;
	box-shadow: 0px 0px 10px -5px black;
	background-image: url("../image/add.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 90px;
}
.changeImage{
	
	position: absolute;
	bottom: 0;
	right: 0;
	width: 40px;
	height: 40px;
	border-radius: 45px;
	background-color: white;
	background-image: url("../image/edit.png");
	background-position: center;
	background-size: 20px 20px;
	background-repeat: no-repeat;
	box-shadow: 0px 0px 10px -5px black;
	cursor: url("../numix-cursor/Numix Dark/Hand.cur"), auto;
}
.changeImage:hover{
	background-color: whitesmoke;
}
.selected{
	padding-top: 5%;
	width: 100%;
	overflow: hidden;
}
.relationField{
	width: 90%;
	margin-top: 5%;
	height: 5%;
	border-radius: 5px;
	border: 1px solid grey;
	color: grey;
	padding-left: 10px;
	padding-right: 10px;
	box-shadow: 0px 0px 10px -5px black;
	text-shadow: 0px 0px 1px grey;
}
.applyCancel{
	margin-top: 3%;
	padding-bottom: 3%;
	padding-right: 5%;
}
.applyCancel input{
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 1%;
	padding-bottom: 1%;
	box-shadow: 0px 0px 10px -7px black;
	border-radius: 5px;
	border: 2px solid grey;
	color: gray;
	cursor: url("../numix-cursor/Numix Dark/Hand.cur"), auto;
}
.applyCancel input:active{
	background-color: dimgrey;
	color: white;
}
.message{
	margin-top: 5%;
	font-size: 13px;
	padding-left: 5%;
	padding-right: 5%;
	text-shadow: 0px 0px 1px grey;
	color: grey;
}
.formContaint{
	padding: 0% 10% 5% 10%;
	height: 47%;
	overflow-y: scroll;
	scrollbar-width: none;
}
.formOption{
	background-color: whitesmoke;
	padding: 3% 5%;
}
.formOptionApply,.formOptionCancel{
	border: 1px solid grey;
	background-color: white;
	color: grey;
	padding: 2% 5%;
	border-radius: 5px;
	margin-right: 10px;
	cursor: url("../numix-cursor/Numix Dark/Hand.cur"), auto;
}
.formOptionApply:hover,.formOptionCancel:hover{
	background-color: whitesmoke;
}
.formOptionApply:active,.formOptionCancel:active{
	background-color: white;
}
.formContaintBack{
	margin-top: 4%;
	width: 100%;
	height: 50px;
	position: relative;
}
.formContaintInput{
	width: 100%;
	height: 75%;
	position: absolute;
	bottom: 0;
	left: 0;
	border: 1px solid grey;
	border-radius: 5px;
	color: grey;
	padding-left: 5%;
	padding-right: 5%;
	scrollbar-width: none;
}

.formContaintLabel{
	position: absolute;
	background-color: white;
	z-index: 99;
	top: 0;
	left: 5%;
	padding: 0 3%;
	color: grey;
	font-size: 15px;
}

			.formContaintBackMultiple{
				margin-top: 4%;
				width: 100%;
				position: relative;
			}
			.formContaintLabelMultiple{
				position: absolute;
				background-color: white;
				z-index: 99;
				margin-top: -2%;
				left: 5%;
				padding: 0 3%;
				color: grey;
				font-size: 15px;
			}
			.selectContainer{
				width: 90%;
				min-height: 10%;
				border: 1px solid grey;
				border-radius: 5px;
  				display: flex;
  				flex-wrap: wrap;
				padding: 5%;
			}
			.selectOption{
				height: 22px;
				align-content: center;
				margin: 3px;
				border-radius: 32px;
				background-color: Gainsboro;
				color: grey;
				padding: 5px 12px;
			}
			.selectOption button{
				background-color: transparent;
				border-width: 0;
				font-size: 100%;
				color: grey;
				cursor: pointer;
			}
			.selectOption button:hover{
				color: #606060;
			}
			.selectInput{
				height: 22px;
				width: 50px;
				align-content: center;
				margin: 3px;
				border-radius: 32px;
				background-color: transparent;
				color: grey;
				padding: 5px 12px;
				border-width: 0;
			}
			.formContaintBackMultiple select{
				width: 100%;
				display: none;
			}
@media screen and (max-width: 550px){
	.formBack{
		margin-top: 0;
		width: 100%;
		height: 100%;
	}
	.formContaint{
		height: 65%;
	}
	.blurEffect{
		padding-top: 5%;
		height: 95%;
	}
	.selectContainer{
		display: none;
	}
	.formContaintBackMultiple,.formContaintBack{
		height: 60px;
	}
	.formContaintBackMultiple select{
		bottom: 0;
		display: block;
		width: 100%;
		height: 75%;
		position: absolute;
		border: 1px solid grey;
		border-radius: 5px;
		color: grey;
		padding-left: 5%;
		padding-right: 5%;
		scrollbar-width: none;
	}
	.formOption{
		height: 10%;
		background-color: whitesmoke;
		padding: 0% 5% 0% 5%;
		display: flex;
		align-items: center;
		justify-content: flex-end
	}
	.formOptionApply,.formOptionCancel{
		padding: 3% 6%;
	}
	
}