openpower.foundation_sw_dev/themes/openpowerfoundation/assets/css/forms.scss

#contact .form #sendmessage {
	color: #ff8800;
	border: 1px solid #1dc8cd;
	display: none;
	text-align: center;
	padding: 15px;
	font-weight: 600;
	margin-bottom: 15px;
}
#contact .form #errormessage {
	color: red;
	display: none;
	border: 1px solid red;
	text-align: center;
	padding: 15px;
	font-weight: 600;
	margin-bottom: 15px;
}
.contactee select {
	background-color: #2566f4;
	color: white;
	padding: 12px;
	width: 100%;
	border: none;
	font-size: 20px;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);   -webkit-appearance: button;   appearance: button;   outline: none;
}

#isarfc .form #sendmessage {
	color: #2566f4;
	border: 2px solid #008800;
	display: none;
	text-align: center;
	padding: 15px;
	font-weight: 600;
	margin-bottom: 15px;
}
#isarfc .form #errormessage {
	color: #ff0000;
	display: none;
	border: 2px solid #880000;
	text-align: center;
	padding: 15px;
	font-weight: 600;
	margin-bottom: 15px;
}
#isarfc .form #sendmessage.show,
#isarfc .form #errormessage.show,
#isarfc .form .show {
	display: block;
}
#isarfc .form .validation {
	color: #880000;
	display: none;
	margin: 0 0 20px;
	font-weight: 400;
	font-size: 13px;
}
#isarfc .form input, #contact .form textarea {
	border-radius: 0;
	box-shadow: none;
	font-size: 14px;
}
#isarfc .form button[type="submit"] {
	background: #2566f4;
	border: 0;
	border-radius: 2rem;
	padding: 1rem 5rem 1rem 5rem;
	color: #ffffff;
}
#isarfc .form button[type="submit"]:hover {
	background: #000000;
	cursor: pointer;
}
#isarfc .comment {
	color: #666666;
	font-style: italic;
}

#passport .form #sendmessage {
	color: #2566f4;
	border: 2px solid #008800;
	display: none;
	text-align: center;
	padding: 15px;
	font-weight: 600;
	margin-bottom: 15px;
}
#passport .form #errormessage {
	color: #ff0000;
	display: none;
	border: 2px solid #880000;
	text-align: center;
	padding: 15px;
	font-weight: 600;
	margin-bottom: 15px;
}
#passport .form #sendmessage.show,
#passport .form #errormessage.show,
#passport .form .show {
	display: block;
}
#passport .form .validation {
	color: #880000;
	display: none;
	margin: 0 0 20px;
	font-weight: 400;
	font-size: 13px;
}
#passport .form input, #contact .form textarea {
	border-radius: 0;
	box-shadow: none;
	font-size: 14px;
}
#passport .form button[type="submit"] {
	background: #2566f4;
	border: 0;
	border-radius: 2rem;
	padding: 1rem 5rem 1rem 5rem;
	color: #ffffff;
}
#passport .form button[type="submit"]:hover {
	background: #000000;
	cursor: pointer;
}


.member-value,
.member-list {
	width: 100%;
}
.member-value {
	font-weight: 600;
	letter-spacing: 4px;
	height: 4rem;
	font-size: 1.1rem;
	padding: 1rem;
	color: #ffffff;
	background-color: #2566f4;
	border: 3px solid transparent;
	transition: .3s ease-in-out;
	&::-webkit-input-placeholder {
		color: #ffffff;
	}
	&:hover {
		background-color: #2566f4;
		cursor: pointer;
		&::-webkit-input-placeholder {
			color: #ffffff;
		}
	}
	&:focus,
	&.open {
		box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2);
		outline: 0;
		color: #ffffff;
		background-color: #2566f4;
		&::-webkit-input-placeholder {
			color: #ffffff;
		}
	}
}
.member-list {
	list-style: none;
	box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2);
	overflow: hidden;
	max-height: 0;
	transition: .3s ease-in-out;
	&.open {
		max-height: 320px;
		overflow: auto;
	}
	li {
		position: relative;
		height: 4rem;
		color: #ffffff;
		background-color: #2566f4;
		padding: 1rem;
		font-size: 1.1rem;
		display: flex;
		align-items: center;
		cursor: pointer;
		transition: background-color .3s;
		opacity: 1;
		&:hover {
			color: #2566f4;
			background-color: #ffffff;
		}	
		&.closed {
			max-height: 0;
			overflow: hidden;
			padding: 0;
			opacity: 0;
		}
	}
}