@media (min-width :576px){
input {
	  width: auto;
  }
}

.bwa {
  background-color: rgb(9, 230, 156);
}
.bwa:hover {
  cursor: pointer;
  background-color: rgb(246, 43, 43);
}

/* edit tanggal 23 september 2026 */
.embosBox {
	background-color: #f0f0f0;
	border: none;
	box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
}

input[type="text"]:focus {
	background-color: lightblue;
	color: brown;
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
		"Lucida Sans", Arial, sans-serif;
	font-weight: bold;
}

input[type="password"]:focus {
	background-color: lightblue;
	color: brown;
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
		"Lucida Sans", Arial, sans-serif;
	font-weight: bold;
}

.btn:hover {
	position: relative;
	padding: 12px 20px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	display: inline-block;
	width: fit-content;
	height: 50px;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
	border: none;
	border-radius: 30px;
	z-index: 1;
	user-select: none;
	cursor: pointer;
}

.btn {
	transition-duration: 0.4s;
	background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
	background-size: 400%;
	color: #ffeb3b;
	border-radius: 40px;
	box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
		inset -4px -4px 6px 1px rgba(255, 255, 255, 0.7),
		-0.5px -0.5px 0px rgba(255, 255, 255, 1),
		0.5px 0.5px 0px rgba(0, 0, 0, 0.13),
		0px 12px 10px -10px rgba(255, 255, 255, 0.7);
}