*{
Margin: 0;
Padding: 0;
line-height: normal;
}

#backgroundimage{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: .1;
	z-index: -1;
}

body {
	display: grid;
	grid-template-rows: repeat(3,max-content) 1fr 50px;
	grid-template-areas:
	"header"
	"loginmenu"
	"loginlabel"
	"indexbody"
	"footer"
	;

	/* background-color: antiquewhite; */
}

#username::placeholder, #passwordlogin::placeholder{
	color: blue;
}

#conameid{
	width: 250px !important;
	height: 60px !important;
}


#loginlabel{
	grid-area: loginlabel;
	width:max-content;
	justify-self: center;
	font-weight: bold;
	font-size: 25px;
	margin-top: 45px;
}

#indexbody{
	grid-area: indexbody;
	margin-top: 20px;
	display: grid;
	height: max-content;

}

#co_name{
	padding-left: 15px !important;
	/* filter: drop-shadow(2px 5px 6px black) !important; */
}

#logingrid{
	width: max-content;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--colord2a679);
}

#loginform{
	min-width: 300px;
	max-width: 350px;
	padding: 15px;
	display: grid;
	justify-self: center;
	border: 2px solid black;
	grid-template-rows: repeat(4, max-content);
	grid-template-areas:
		"profilesection"
		"errormsg"
		"passwordsection"
		"button"
		"forgot"
	;
	grid-gap: 25px;
	/* background-color: antiquewhite; */
	background-color: var(--colord2a679);
	border-radius: 10px;

}

#profilesection{
	grid-area: profilesection;
}

#errormsg{
	grid-area: errormsg;
	display: none;
	font-size: 20px;
	font-weight: bold;
	color: red;
	text-align: center;
	text-decoration: underline;
	height: max-content;

}

#pwdarea{
	grid-area: inputentry;
}

#submitbtn{
	grid-area: button;
	background-color: white;
}

.inputgroup{
	width: 100%;
	height: max-content;

	display: grid;
	grid-template-rows: repeat(3, max-content);
	grid-template-areas: 
	"inputentry"
	"inputlabel"
	"inputmsg"
	;
}

#loginsection, #username,.inputlabel{
	width: 350px;
	height: 35px;
} 

#username, #loginsection{
	border-radius: 20px;
}

#username, #passwordlogin{
	padding-left: 6px;
	font-size: 1.1em;
}

#username:focus, #passwordlogin:focus{
	outline: none;
}

#username{
	grid-area: inputentry;

}

/* password section */
#passwordsection{
	grid-area: passwordsection;
}

#loginsection{
	grid-area: inputentry;
	border-radius: 20px;
	border: 1px solid black;

	display: grid;
	grid-template-columns: 1fr max-content;
	grid-template-areas:
		"input show"
	;

	background-color: white;

}

#passwordlogin{
	grid-area: input;
	border: none;
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;

}

.showpwdclass{
	display: block;
}

.hidepwdclass{
	display: none;
}

/* .logininput{
	grid-area: input;
	font-size: 17px;	
	
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px
} */

.showpwd{
	grid-area: show;
	width: 35px;
	align-self: center;
	padding-right: 5px;
	cursor: pointer;

}

#hidepwd{
	display: block;
}

#showpwd{
	display: none;
}

.inputlabel{
	grid-area: inputlabel;
	font-size: 16px;
	color: black;
	text-align: center;
	text-align: center;
	font-style: italic;
}

.login:hover{
	/*background-color: #CFB53B;*/
	color: #CFB53B;
	font-weight: bold;
	background-color: white;
}

.inputmsg{
	grid-area: inputmsg;
	display: none;
	font-size: 13px;
	color: blue;
	text-align: center;
	font-style: italic;
}

.allbuttons{
	color:  var(--color996633);
	width: 250px;
	height: 30px;
	margin-bottom: 10px;
	text-align: center;
	cursor: pointer;
	border-radius: 15px;
}

.submit:hover{
	background-color: transparent;
	border-color: white;
	border: 1px solid;
	color:var(--oldGold);
}

.enterBtn{
	display: block;
	margin: 0 auto;
}

#forgot{
	font-size: 17px;
	color: black;
	grid-area: forgot;
	width: 100%;
    
    text-align: center;
}

#forgot:hover{
	color: blue; 
	font-weight: bold;
}

#notmember{
	width: max-content;
	height: max-content;
	padding: 10px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

.signuptext{
	font-size: 20px;
	color: crimson;
	font-weight: bolder;
	/* color:var(--color996633); */
	text-align: center;
	width: max-content;
	height: max-content;
	padding: 10px;
}

.signuptext:hover{
	/* background-color: transparent; */
	/* border-color: white; */
	/* border: 1px solid; */
	font-weight: bold;
	
}

#phonenumber:visited{
    color:unset;
}

::-webkit-input-placeholder {
	text-align: center;
	color: var(--colord2a679);
}


.allbuttons:hover{font-size: 15px; color: blue; font-weight: bold; }