.form-field {
	margin-bottom: 20px;
}

form label {
	font-size: 14px;
	text-transform: uppercase;
	color: #297666;
	margin-bottom: 10px;
	display: block;
	font-family: "JetBrains Mono";
}

form input[type="text"],
form input[type="email"],
form input[type="url"],
form input[type="search"],
form input[type="password"],
form input[type="datetime-local"],
form input[type="file"],
form textarea,
form select {
	display: block;
	width: 100%;
	background: #bbfcef12;
	border: 1px solid #bbfcef14;
	padding: 15px;
	border-radius: 4px;
	font-size: 14px;
	font-family: "JetBrains Mono";
	color: var(--teal-light);
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="url"]:focus,
form input[type="search"]:focus,
form input[type="password"]:focus,
form input[type="datetime-local"]:focus,
form input[type="file"]:focus,
form textarea:focus,
form select:focus {
	outline: 0;
	border-color: var(--teal-light);
}

form input[type="text"]::placeholder,
form input[type="email"]::placeholder,
form input[type="url"]::placeholder,
form input[type="search"]::placeholder,
form input[type="password"]::placeholder,
form input[type="datetime-local"]::placeholder,
form input[type="file"]::placeholder,
form textarea::placeholder,
form select::placeholder {
	color: #73aa9f;
}

form input[type="datetime-local"] {
	color-scheme: dark;
}


form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbfcef" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}

form input[type="file"]::file-selector-button {
	background: var(--teal-light);
	color: #000;
	font-family: "JetBrains Mono";
	font-size: 12px;
	padding: 2px 6px;
	font-weight: 600;
	border-radius: 4px;
	border: none;
	margin-right: 15px;
	text-transform: uppercase;
}

.select {
  position: relative;
}

.select select {
  appearance: none;
  position: relative;
  padding-right: 50px;
}

.select:after {
  content: "\f078";
  font-family: "Font Awesome 6 Pro";
  display: block;
  position: absolute;
  top: 17px;
  right: 20px;
  color: var(--teal-light);
}

form .input-hint {
  color: #73a69c;
  font-size: 14px;
  line-height: 22px;
  margin: 15px 0;
  font-family: "JetBrains Mono";
}

form .input-hint.error {
  color: #73a69c;
  font-size: 14px;
  margin: 15px 0;
  font-family: "JetBrains Mono";
}

form button[type="submit"] {
	background: linear-gradient(0deg, rgba(14,20,21,1) 0%, rgba(26,38,40,1) 100%);
	padding: 15px;
	border-radius: 4px;
	margin-top: 10px;
	display: block;
	width: 100%;
	border: 1px solid #222e31;
	color: var(--teal-light);
	font-family: "JetBrains Mono";
	text-transform: uppercase;
	font-size: 14px;
	text-shadow: 0px 0px 10px rgba(177, 241, 228, 0.5);
	cursor: pointer;
}

[type="search"]::-webkit-search-decoration,
[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

[type="search"] {
  appearance: textfield;
  outline-offset: -2px; /* Fix outline style in Safari */
}