.logo {
  width: 100%;
  margin-left: 50%;
}

.login-page {
  margin-top: 30px;
}

.site-login,
.site-signup,
.card-body {
  background-color: var(--background-primary-color-admin, black);
  border-radius: 10px;
  color: var(--main-text-color-admin, white) !important;
}

.site-login span {
  color: var(--main-text-color-admin, white) !important;
}

.site-login span:not(:first-child) {
  color: var(--background-primary-color-admin, black) !important;
}

.site-login .g_id_signin span {
  color: inherit !important;
}

#submitButton {
  border-radius: 30px;
}

/* #lib non sono sono riuscito ad allinearlo con bootstrap :C */
input[type="date"] {
  width: 100%;
  margin-left: 0;
}

.is-valid,
.is-valid:focus,
.form-control.is-valid,
.custom-control-input.is-valid,
.custom-control-input.is-valid:checked ~ .custom-control-label::before {
  border-color: #ced4da !important;
  background-image: none !important;
  box-shadow: none !important;
  /* color: var(--background-primary-color-admin, black); */
}

/* Store badges */
.store-badge {
  height: auto;
  width: 30%;
}

/* OTP slots */
.otp-wrapper {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 12px;
}

.otp-slot {
  width: 46px;
  height: 54px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background: #fff;
}

.otp-slot:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  border-color: #80bdff;
}

/* Hide the real input but keep it accessible */
.otp-hidden-input {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

#dfa-logo-container img {
  max-height: 90px;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.form-group.required label::after {
  content: " *";
  color: #dc3545;
  font-weight: bold;
}

/* //LIB decommentare se si vuole qiaggiungere il tema ai bottoni */
.custom-button-color:hover,
#togglePassword {
  background-color: var(--portal-color-hover, #0b9a2f) !important;
  border-color: var(--portal-color-hover, #0b9a2f) !important;
}

.custom-button-color,
#togglePassword {
  background-color: var(--portal-color-secondary, #0b9a2f) !important;
  border-color: var(--portal-color-secondary, #0b9a2f) !important;
  color: var(--main-text-color-admin, white) !important;
}

/* //bottone google per le app */

.google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 40px;
  padding: 0 16px 0 12px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  background: #fff;
  color: #3c4043;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: none;
  transition: background-color 0.2s ease;
}

.google-btn:hover {
  background: #f7f8f8;
}

.google-btn:active {
  background: #eeeeee;
}

.google-btn__icon img {
  width: 18px;
  height: 18px;
  display: block;
}

.google-btn__text {
  line-height: 40px;
  white-space: nowrap;
  color: inherit !important;
}

.p-left-0 {
  padding-left: 0;
}

body {
  background-color: var(--main-text-color-admin, white) !important;
}

/* Oauth stuff */

#appleid-signin,
#appleid-signin * {
  font-family: applied-button-font-0 !important;
}

#appleid-signin svg {
  vertical-align: unset;
}

.g_id_signin,
.g_id_signin * {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
  font-size: 18px !important;
  font-weight: bold !important;
}