div.example input[type=text] {
	border: 1px solid grey;
	padding: 5px;
	float: left;
	width: 70%;
	background-color: #E1E1E1FF;
}

div.example2 div {
	border: 1px solid grey;
	padding: 5px;
	float: left;
	width: 70%;
	background-color: #E1E1E1FF;
	color: black;
}

/* div.example3 div {
	border: 1px solid grey;
	padding: 5px;
	float: left;
	width: 70%;
	background-color: #E1E1E1FF;
	color: black;
}

div.example3.grayedout div {
	color: gray;
} */

div.example4 div {
	/* border: 1px solid grey; */
	padding: 5px;
	float: left;
	width: 70%;
	/* background-color: #E1E1E166; */
	color: black;
	pointer-events: none;
}

div.example button {
	float: left;
	width: 30%;
	background-color: #31A6FFFF;
	color: white;
	border: 1px solid grey;
	border-left: none;
	cursor: pointer;
}

div.example button:disabled {
	background-color: gray;
	cursor: not-allowed;
}

div.example2 button {
	float: left;
	width: 30%;
	background-color: #31A6FFFF;
	color: white;
	border: 1px solid grey;
	border-left: none;
	cursor: pointer;
}

/* div.example3 button {
	float: left;
	width: 30%;
	background-color: #31A6FFFF;
	color: white;
	border: 1px solid grey;
	border-left: none;
	cursor: pointer;
} */

/* div.example3.grayedout button {
	background-color: gray;
	cursor: wait;
} */

div.example4.green button {
	float: left;
	width: 30%;
	background-color: #55FF5588;
	color: green;
	border: 1px solid grey;
	/* border-left: none; */
	cursor: pointer;
	pointer-events: auto;
}

div.example4.red button {
	float: left;
	width: 30%;
	background-color: #FF555588;
	color: red;
	border: 1px solid grey;
	/* border-left: none; */
	cursor: pointer;
	pointer-events: auto;
}

div.example button:hover {
	background-color: #006DCAFF;
}

div.example button:disabled:hover {
	background-color: gray;
}

div.example2 button:hover {
	background-color: #006DCAFF;
}

div.example3 button:hover {
	background-color: #006DCAFF;
} 

 div.example3.grayedout button:hover {
	background-color: gray;
}

div.example4.green button:hover {
	background-color: #22FF2288;
}

div.example4.red button:hover {
	background-color: #FF222288;
}

div.example::after {
	content: "";
	clear: both;
	display: table;
}

div.gobutton {
	background-color: #31A6FFFF;
	color: #FFFFFFFF;
	cursor: pointer;
}

div.gobutton:hover {
	background-color: #006DCAFF;
}

div.gobutton:active {
	background-color: #0040A0FF;
}

div.gobutton.grayedout {
	background-color: #888888FF;
	color: #000000FF;
	cursor: wait;
}

div.gobutton.grayedout:hover {
	background-color: #888888FF;
}

div.gobutton.grayedout:active {
	background-color: #888888FF;
}