body {
	background-color: #222;
	color: #eee;
}

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

label {
	font-weight: 300;
}

a.link-on-black {
	color: #78ACD9 !important;
  font-weight: bold;
}

a.link-on-black:focus, a.link-on-black:hover {
	color: #488ECB !important;
}

.grecaptcha-badge {
  visibility: hidden;
}

#tfaRegistration h2 {
  font-weight: 700;
}

#tfaRegistration h1, #tfaRegistration h2 {
  margin-top: 20px;
}

#tfaRegistration #code {
  width: 50%;
  margin-bottom: 10px;
}

#tfaRegistration #tfaError {
  width: 50%;
}

#tfaQRCode {
  border-radius: 5px;
}

#tfaQRSecret {
  font-weight: bold;
}

#verifyTfaBtn {
  margin-bottom: 10px;
}

.required-field::after {
  content: "*";
  color: #d9534f;
  margin-left: 4px;
  font-weight: bold;
}

/* Focus styles for better keyboard navigation */
input:focus {
  outline: 2px solid #0066cc;
  outline-offset: 1px;
}

/* Style for invalid inputs with better contrast */
input:invalid:focus:not(:placeholder-shown) {
  border-color: #d9534f;
  border-width: 2px; /* Thicker border for better visibility */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23d9534f'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  padding-right: 35px;
}

/* Style for the error message with better spacing */
.error-text {
  display: none;
  color: #c41c1c; /* Darker red for better contrast */
  font-size: 0.875rem;
  margin-top: 5px;
  padding: 4px 0;
  font-weight: 500; /* Slightly bolder for emphasis */
}

/* Show error message when input is invalid and not empty */
input:invalid:not(:placeholder-shown) + .error-text {
  display: block;
}

/* Add an icon to the error message */
.error-text::before {
  content: "⚠️";
  margin-right: 5px;
}

/* Support for RTL languages */
[dir="rtl"] .required-field::after {
  margin-right: 4px;
  margin-left: 0;
}

[dir="rtl"] input:invalid:not(:placeholder-shown) {
  background-position: left 10px center;
  padding-right: initial;
  padding-left: 35px;
}

[dir="rtl"] .error-text::before {
  margin-right: 0;
  margin-left: 5px;
}

/* High contrast mode support */
@media (forced-colors: active) {
  input:invalid:not(:placeholder-shown) {
    border: 2px solid CanvasText;
    forced-color-adjust: none;
  }

  .error-text {
    color: CanvasText;
  }
}
.help-block.with-errors ul li {
  color: #d9534f;
}
/* Style for alert messages */
.alert-danger {
  position: relative;
  padding-left: 35px; /* Make space for the icon */
  border-left: 5px solid #d9534f; /* Additional visual indicator */
}

.alert-danger::before {
  content: "\f071"; /* Font Awesome exclamation triangle (warning) icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #d9534f;
}

/* Support for RTL languages */
[dir="rtl"] .alert-danger {
  padding-left: 1rem;
  padding-right: 35px;
  border-left: none;
  border-right: 5px solid #d9534f;
}

[dir="rtl"] .alert-danger::before {
  left: auto;
  right: 10px;
}