body {
  background-color: #383F51; }

.btn-zsoz-primary {
  color: #fff;
  background-color: #383F51;
  border-color: #090909;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: 0.375rem; }

.btn-zsoz-primary:hover,
.btn-zsoz-primary:active,
.btn-zsoz-primary:focus,
.btn-zsoz-primary.active {
  /* let's darken #004E64 a bit for hover effect */
  background: #3C4F76;
  border-color: #090909;
  color: #ffffff;
  border-color: #090909; }

.title {
  color: #DDDBF1;
  font-weight: bold;
  font-size: 18px; }

.darktitle {
  color: #090909;
  font-weight: bold;
  font-size: 18px; }

.center-card {
  width: 380px;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem; }

.error-card .card-header {
  background-color: red;
  color: white; }

.common-error {
  color: red; }

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: medium; }

.valid {
  color: #198754; }

.invalid {
  color: #dc3545; }

.card-title {
  font-size: 22px; }

.card-text {
  font-size: 14px; }

.formsubmitspinner {
  text-align: center; }

.errormsg {
  width: 100%;
  margin-top: 0.25rem;
  font-size: .875em;
  color: #dc3545; }




/* Overlay styles */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 9999; /* Ensure it's above other content */
  display: none; /* Initially hidden */
}
/* Center spinner vertically and horizontally */
.spinner-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Custom color for the spinner */
.spinner-border.custom-spinner {
  color: #0e3a6a !important;
  width: 5rem; /* Adjust the width */
  height: 5rem; /* Adjust the height */
  border-width: 0.5em; /* Adjust the border width */
}