* {
	
	font-family: 'Barlow', sans-serif;
	
}


body {
	
	margin: 50px auto;
	padding: 0 20px 20px 20px;
	width: 700px; 
	height: 820px;
	border-style: groove;
	background-color: #e6ffe6;
	border-radius: 10px;
	border-width: 2px;
	border-color: #ccffcc;
	
}

html {
	
	background-color: #e3f1f1;
	height: 900px;
	
}

#contact-list {
	
	background-color: #f0f7f6;
	height: 645px;	
	margin-top: -20px;
	border-style: ridge;
	border-width: 2px;
	border-color: #ace3c6;
	overflow: auto;
	
	
}

#contact-list {
	
	-ms-overflow-style: none;
	scrollbar-width: none;
	
}

#contact-list::-webkit-scrollbar {
	display: none;
}

#title {
	
	margin-top: 40px;
	margin-left: 450px;
	font-size: 40px;
	
}

#add-button {
	
	margin-top: -120px;
    height: 70px;
    width: 240px;
	background-color: #ff6666;
	font-size: 18px;
	border-style: hidden;
	border-radius: 5px;
	font-weight: bold;
	cursor: pointer;
	
}

#add-button:hover {
	
	background: red;
	
}

#list-title {
	
	margin-top: 0px;
	margin-left: 5px;
	
}

#logo {
	
	margin: 25 0 -100 390;
	
}

#popup-form {
	
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	width: 500px;
	height: 430px;
	background-color: #e6ffe6;
	border-style: groove;
	border-radius: 5px;
	border-color: #ccffcc;
	border-width: 2px;
	z-index: 1;
}

#form_fieldset {
	
	margin: 5px auto;
	width: 470px;
	height: 365px;
	background-color: #f0f7f6;
	border-color: #ace3c6;
	border-style: ridge;
	border-width: 2px;
	
}

#search {
	
	margin-left: 400px;
	margin-top: -20px;
	width: 235px;
	height: 50px;
	background-color: #f0f7f6;
	border-radius: 5px 0px 0px 5px;
	border-style: ridge;
	border-color: #ace3c6;
	border-width: 2px;
	font-size: 25px;
	padding-left: 6px;
	
}

.form-div {
	
	height: 50px;
	background-color: #daebdf;
	margin-bottom: 10px;
	padding: 10px 0px 0px 15px;
	border-style: ridge;
	border-color: #ace3c6;
	border-width: 2px;
	
	
}

label {
	
	font-size: 20px;

}

.contacts {
	
	height: 40px;
	width: 330px;
	font-size: 20px;
	background-color: #f0f7f6;
	border-style: ridge;
	border-color: #ace3c6;
	border-width: 2px;
	padding-left: 5px;
		
}

#number {
	
	height: 40px;
	width: 293px;
	font-size: 20px;
	background-color: #f0f7f6;
	border-style: ridge;
	border-color: #ace3c6;
	border-width: 2px;
	
}

#gender {
	
	height: 40px;
	font-size: 20px;
	background-color: #f0f7f6;
	border-style: ridge;
	border-color: #ace3c6;
	border-width: 2px;
	
}

#submit {
	
	height: 55px;
	width: 150px;
	background-color: #6674cc;
	font-size: 18px;
	border-style: hidden;
	border-radius: 5px;
	font-weight: bold;
	margin-left: 150px;
	cursor: pointer;
	
}

#submit:hover {
	
	background: #0b0edb;
	
}

.close {
	
	margin: -5px 0px 0px 475px;
	font-size: 15px;
	background-color: #daebdf;
	border-style: ridge;
	border-color: #ace3c6;
	width: 25px;
	height: 25px;
	cursor: pointer;
	
}

.close:hover {
	
	background: #05e854;
	
}

.profile_div {
	
	display: none;
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    margin: 83px 0 0px 0px;
    background-color: #daebdf;
    width: 675px;
    height: 620px;
    border-style: ridge;
    border-color: #ace3c6;
    border-width: 2px;

	
}
.display {
	
	margin: 10px 0 -20px 10px;
	background-color: #daebdf;
	color: black;
	cursor: pointer;
	padding: 20px;
	width: 632px;
	text-align: left;
	outline: none;
	font-size: 18px;
	border-style: ridge;
	border-color: #ace3c6;
	border-width: 2px;
	font-weight: bold;

	
}

.display:hover {
	
	background: #688f73;

}

.profile-fieldset {
	
    width: 600px;
    height: 484px;
    background-color: #f0f7f6;
    border-color: #ace3c6;
    border-style: ridge;
    border-width: 2px;
    margin: 45px 0 0 23px;

}

.profile {
	
	height: 55px;
	background-color: #daebdf;
	margin-bottom: 10px;
	padding: 10px 0px 0px 15px;
	border-style: ridge;
	border-color: #ace3c6;
	border-width: 2px;

}

.profile_data {
	
	height: 40px;
	width: 445px;
	font-size: 20px;
	background-color: #f0f7f6;
	border-style: ridge;
	border-color: #ace3c6;
	border-width: 2px;
	margin: -53px 0px 0px 120px;
	color: balck;
	padding-left: 5px;
	padding-top: 1px;
	
}

.data {
	
	font-size: 20px;
	margin-top: 13px;
	font-weight: bold;
	
}

.delete {	
	
	background-color: #e39a52;
    width: 80px;
    height: 30px;
	font-size: 13px;
	border-style: hidden;
	border-radius: 5px;
	font-weight: bold;
	cursor: pointer;
	float: right;
	margin-top: 28px;
	margin-right: 30px;

}

.delete:hover {
	
	background: #f57c02;
	
}

.edit {
	
    background-color: #FFEBA6;
    margin: 43px 0px 0px 180px;
    width: 235px;
    height: 65px;
    font-size: 25px;
    border-style: hidden;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
	display: block;
	
}

.edit:hover {
	
	background: #FFFF00;
	
}


.save-edit {
	
	display: none;
	background-color: #6674cc;
	margin: 43px 0px 0px 180px;
    width: 235px;
    height: 65px;
    font-size: 25px;
    border-style: hidden;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
	
} 

.save-edit:hover {
	
	background: #0b0edb;
	
}

.confirm {
	
	display: none;
	padding: 20px;
	width: 500px;
	height: 189px;
	background-color: #e6ffe6;
	border-style: groove;
	border-radius: 5px;
	border-color: #ccffcc;
	border-width: 2px;
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
	
}

.close-contact {
	
	font-size: 15px;
	background-color: #daebdf;
	border-style: ridge;
	border-color: #ace3c6;
	width: 25px;
	height: 25px;
	cursor: pointer;
	position: absolute;
	margin: 16px 0px 0 626px;
	
}

.close-contact:hover {
	
	background: #05e854;
	
}

.confirm-div {
	
	background-color: #f0f7f6;
	border-color: #ace3c6;
    border-style: ridge;
    border-width: 2px;
	width: 492px;
    height: 185px;
	
}

.confirm-text {
	
	width: 492px;
	font-size: 25px;
    margin: 45px 0 -71px 30px;
	
}

.confirm-delete {
	
    width: 145px;
    height: 50px;
	font-size: 18px;
	border-style: hidden;
	border-radius: 5px;
	font-weight: bold;
	cursor: pointer;
	background-color: #e39a52;
	margin: 90px 70px 0px 63px;
	
}

.confirm-delete:hover {
	background: #f57c02;
}

.confirm-cancel {
	
	margin: 0;
    width: 145px;
    height: 50px;
	font-size: 18px;
	border-style: hidden;
	border-radius: 5px;
	font-weight: bold;
	cursor: pointer;
	background-color: #93c298;
	
	
}

.confirm-cancel:hover {
	background: #05e854;
}

#searchBtn {
	
	margin: -20px 0 0 0;
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 0px 5px 5px 0px;
	border-style: ridge;
	border-color: #ace3c6;
	border-width: 2px;
	background-color: #f0f7f6;
	
}

#searchBtn:hover {
	background: #dcebda;
}

#btnImg {
	
	width: 30px;
	height: 30px;
}
 
#search-form {
	margin: 0;
}

#search-results {
	
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	width: 500px;
	height: 360px;
	background-color: #e6ffe6;
	border-style: groove;
	border-radius: 5px;
	border-color: #ccffcc;
	border-width: 2px;
		
}

#result-field {
	
	margin: 5px auto;
	width: 470px;
	height: 310px;
	background-color: #f0f7f6;
	border-color: #ace3c6;
	border-style: ridge;
	border-width: 2px;
	overflow: auto;
	
}

#result-field {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

#result-field::-webkit-scrollbar {
	display: none;
}

.results-field {
	
	height: 50px;
	background-color: #daebdf;
	margin-bottom: 10px;
	padding: 10px 0px 0px 15px;
	border-style: ridge;
	border-color: #ace3c6;
	border-width: 2px;
	
}

.results {
	
	height: 40px;
	width: 330px;
	font-size: 20px;
	background-color: #f0f7f6;
	border-style: ridge;
	border-color: #ace3c6;
	border-width: 2px;
	margin: -50px 0 0 105px;
	padding-left: 5px;

}

.search-data {
	
	font-weight: bold;
	font-size: 16px;
	margin: 13px 0px 20px 0px;
}

#search-error {
	
	padding: 20px;
	width: 500px;
	height: 189px;
	background-color: #e6ffe6;
	border-style: groove;
	border-radius: 5px;
	border-color: #ccffcc;
	border-width: 2px;
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	
}

.error {
	
	background-color: #f0f7f6;
	border-color: #ace3c6;
    border-style: ridge;
    border-width: 2px;
	width: 492px;
    height: 185px;
	
}

#error-text {
	
	width: 492px;
	font-size: 25px;
    margin: 45px 0 -71px 30px;
	
}

#error-close {
	
	margin: -70px 0 0 160px;
    width: 185px;
    height: 50px;
    font-size: 18px;
    border-style: hidden;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    background-color: #93c298;
	
}

#error-close:hover {
	
	background: #f57c02;
	
}

#export-btn {
	margin: -42px 0 0 0;
    position: absolute;
    height: 35px;
    width: 90px;
    background-color: #F8ED4D;
    font-size: 12px;
    border-style: hidden;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
	z-index: 0;
}

#export-btn:hover {
	background: #FAEA01;
}

#export-form {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	width: 500px;
	height: 350px;
	background-color: #e6ffe6;
	border-style: groove;
	border-radius: 5px;
	border-color: #ccffcc;
	border-width: 2px;
	z-index: 1;
}

#export-fieldset {
	
	margin: 5px auto;
	width: 470px;
	height: 295px;
	background-color: #f0f7f6;
	border-color: #ace3c6;
	border-style: ridge;
	border-width: 2px;
	
}

.export-div {
	
	height: 50px;
	background-color: #daebdf;
	margin-bottom: 10px;
	padding: 10px 0px 0px 15px;
	border-style: ridge;
	border-color: #ace3c6;
	border-width: 2px;
	
}

#file-format {
	
	height: 115px;
	
}

#data {
	
	height: 40px;
    width: 330px;
    font-size: 20px;
    background-color: #f0f7f6;
    border-style: ridge;
    border-color: #ace3c6;
    border-width: 2px;
	padding-left: 5px;
	
}

#export {
	
	height: 55px;
	width: 150px;
	background-color: #d5db8c;
	font-size: 18px;
	border-style: hidden;
	border-radius: 5px;
	font-weight: bold;
	margin-left: 150px;
	cursor: pointer;
	
}

#export:hover {
	
	background: #edf76d;
	
}