*,
*::before,
*::after {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  color: rgb(44, 44, 44);
}

.background {
  background-image: url('../img/senec-house.webp');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity for desired darkness */
}

.content-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.logo-container {
  display: flex;
}

.logo-container img {
  height: 24px;
  margin-bottom: 40px;
}

.login-container {
  background-color: white;
  padding: 30px;
  background-color: rgba(255, 255, 255);
  border-radius: 10px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  margin-top: 20px;
}

.login-form h2 {
  margin-bottom: 20px;
  color: #333;
  font-size: 24px;
}

.input-group-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.input-group input,
.input-group button {
  width: 100%; /* Use 100% to make sure the inputs and buttons do not exceed the container's width */
  height: 48px;
  padding: 10px;
  background-color: #F8F8F8;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
  margin-bottom: 15px;
}

.input-group button {
  background-color: rgb(0, 0, 153);
  color: white;
  border: none;
  cursor: pointer;
}

.input-group {
  margin-bottom: 15px;
}

.input-group button:hover {
  background-color: rgb(0, 0, 123);
}

.alternative-options {
  margin-top: 20px;
}

.alternative-options p {
  margin-bottom: 10px;
  color: #666;
}

.alternative-btn {
  width: 100%;
  padding: 10px;
  border: 2px solid rgb(0, 0, 153);
  border-radius: 5px;
  font-size: 16px;
  background-color: transparent;
  color: rgb(0, 0, 153);
  margin-bottom: 10px;
  cursor: pointer;
}

.alternative-btn:hover {
  background-color: rgb(0, 0, 153);
  color: white;
}

button.custom-button, input[type="submit"].custom-button, input[type="button"].custom-button {
  background-color: rgb(0, 0, 153) !important;
  color: white !important;
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 30px !important; /* Make the button round */
  font-size: 16px !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: center !important;
  display: block;
  margin: 0;
}

button.custom-button:disabled, input[type="submit"].custom-button:disabled, input[type="button"].custom-button:disabled {
  background-color: #999999 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.input-group input.input-error {
  border: 2px solid #f44336;
  color: #f44336;
  background-color: white;
  opacity: 1;
  font-weight: bold;
}

button.custom-button-bordered, input[type="submit"].custom-button-bordered, input[type="button"].custom-button-bordered {
  background-color: white !important;
  color: rgb(0, 0, 153) !important;
  padding: 10px 20px !important;
  border: 2px solid rgb(0, 0, 153) !important;
  border-radius: 30px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: center !important;
  display: block;
}

button.custom-button:hover, input[type="submit"].custom-button:hover, input[type="button"].custom-button:hover {
  background-color: rgb(0, 0, 123) !important; /* Darken color on hover */
}

button.custom-button-bordered:hover, input[type="submit"].custom-button-bordered:hover, input[type="button"].custom-button-bordered:hover {
  background-color: #f2f2f2 !important;
  color: rgb(0, 0, 153) !important;
  border: 2px solid rgb(0, 0, 153) !important;
}

.error-message, .success-message, .warning-message, .info-message {
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  font-size: 14px;
  color: white;
  text-align: left;
}

.error-message {
  background-color: #f44336; /* Red */
}

.success-message {
  background-color: #4CAF50; /* Green */
}

.warning-message {
  background-color: #ff9800; /* Orange */
}

.info-message {
  background-color: #2196F3; /* Blue */
}

.input-error-message {
  color: #f44336;
  font-size: 14px;
  margin-top: 5px;
  font-weight: bold;
  text-align: left;
  display: block;
}

.error-icon::before, .success-icon::before, .warning-icon::before, .info-icon::before {
  content: '!';
  margin-right: 10px;
  font-weight: bold;
}

.error-icon::before {
  content: '\26A0'; /* Warning sign */
  margin-right: 10px;
}

.success-icon::before {
  content: '\2705'; /* Check mark */
  margin-right: 10px;
}

.warning-icon::before {
  content: '\26A0'; /* Warning sign */
  margin-right: 10px;
}

.info-icon::before {
  content: '\2139'; /* Information sign */
  margin-right: 10px;
}

.forgot-password {
  margin-top: 10px;
  margin-bottom: 40px;
  text-align: right;
}

.forgot-password a {
  color: #007bff;
  text-decoration: none;
}

.forgot-password a:hover {
  text-decoration: underline;
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .login-container {
    margin: 0 20px;
    padding: 20px;
    max-width: calc(100% - 40px);
  }

  .input-group input, .input-group button {
    width: 100%;
  }
}

/* User Agreement Styles */
.agreement-container {
  width: 100%;
}
.agreement-content-box {
  background-color: #F8F8F8;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 1em;
}
.agreement-text {
  max-height: 350px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.5;
}
.agreement-text h3 {
  color: rgb(0, 0, 153);
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 5px;
}
.checkbox-container {
  margin-top: 20px;
  text-align: left;
  display: flex;
  align-items: flex-start;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: rgb(0, 0, 153);
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid rgb(0, 0, 153);
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

input[type="checkbox"].checkbox-error {
  border: 0.15em solid #f44336;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 80ms transform ease-in-out;
  box-shadow: inset 1em 1em rgb(0, 0, 153);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.checkbox-text {
  margin-left: 10px;
  font-weight: bold;
  font-size: 14px;
}
.pdf-download {
  margin-top: 20px;
  text-align: right;
}
.pdf-link {
  display: inline-flex;
  align-items: center;
  color: rgb(0, 0, 153);
  text-decoration: none;
  font-weight: bold;
}
.pdf-icon::before {
  content: "📄";
  margin-right: 5px;
}
.pdf-link:hover {
  text-decoration: underline;
}

.link-button {
  display: inline;
  padding: 0;
  border: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
  color: currentColor;

  -webkit-appearance: none;
}

.footer {
  width: 100%;
  max-width: 400px;
  position: relative;
  display: flex;
  justify-content: space-around;
  justify-self: flex-end;
  margin-bottom: 20px;
}

.footer-link {
  text-decoration: none;
  color: white
}

.social-login {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 20px;
}

.mek-login-label {
  font-size: 14px;
  margin-bottom: 10px;
}

/* TOTP Configuration Styles */
.totp-config-container {
  width: 100%;
}

.totp-settings-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  counter-reset: step-counter;
}

.totp-step {
  counter-increment: step-counter;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #F8F8F8;
  border-radius: 8px;
  border-left: 4px solid rgb(0, 0, 153);
  position: relative;
}

.totp-step::before {
  content: counter(step-counter);
  position: absolute;
  left: -2px;
  top: -2px;
  background-color: rgb(0, 0, 153);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
}

.totp-step-text {
  margin: 0 0 10px 0;
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

.totp-supported-apps {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.totp-app-item {
  background-color: white;
  padding: 8px 12px;
  margin: 5px 0;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-size: 13px;
}

.totp-secret-container {
  margin: 10px 0;
}

.totp-secret-label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
  font-size: 13px;
}

.totp-secret-key {
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  word-break: break-all;
  color: rgb(0, 0, 153);
  font-weight: bold;
}

.totp-qr-container {
  text-align: center;
  margin: 15px 0;
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.totp-qr-code {
  max-width: 200px;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.totp-link {
  color: rgb(0, 0, 153);
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
}

.totp-link:hover {
  text-decoration: underline;
}

.totp-barcode-link,
.totp-manual-link {
  text-align: center;
  margin: 10px 0;
}

.totp-config-details {
  margin: 10px 0;
}

.totp-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.totp-detail-item {
  background-color: white;
  padding: 8px 12px;
  margin: 5px 0;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-size: 13px;
}

.totp-detail-item strong {
  color: rgb(0, 0, 153);
}

.totp-device-name-info {
  margin: 5px 0;
  font-size: 13px;
  color: #666;
  font-style: italic;
}

.totp-form {
  width: 100%;
}

.totp-label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
  font-size: 14px;
  text-align: left;
}

.totp-label .required {
  color: #f44336;
  margin-left: 3px;
}

.totp-actions {
  margin-top: 20px;
}

/* Responsive adjustments for TOTP */
@media (max-width: 768px) {
  .totp-step {
    padding: 12px;
  }

  .totp-qr-code {
    max-width: 150px;
  }

  .totp-secret-key {
    font-size: 12px;
  }
}

/* OTP Login Styles */
.otp-device-selection {
  margin-bottom: 20px;
}

.otp-device-label {
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
  font-size: 14px;
}

.otp-devices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.otp-device-item {
  position: relative;
}

.otp-device-radio {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.otp-device-label-item {
  display: block;
  background-color: #F8F8F8;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.otp-device-radio:checked + .otp-device-label-item {
  border-color: rgb(0, 0, 153);
  background-color: rgba(0, 0, 153, 0.05);
}

.otp-device-radio:focus + .otp-device-label-item {
  outline: 2px solid rgb(0, 0, 153);
  outline-offset: 2px;
}

.otp-device-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.otp-device-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid #ddd;
}

.totp-icon {
  font-size: 18px;
}

.otp-device-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.otp-device-name {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

.otp-device-type {
  color: #666;
  font-size: 12px;
}

.otp-input-label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
  font-size: 14px;
  text-align: left;
}

.otp-input-label .required {
  color: #f44336;
  margin-left: 3px;
}

.otp-help-text {
  margin: 10px 0 20px 0;
  padding: 10px;
  background-color: #f0f8ff;
  border-left: 4px solid rgb(0, 0, 153);
  border-radius: 5px;
}

.otp-help-text p {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.alternative-login-options {
  margin-top: 20px;
  text-align: center;
}

/* Responsive adjustments for OTP login */
@media (max-width: 768px) {
  .otp-device-info {
    gap: 8px;
  }

  .otp-device-icon {
    width: 35px;
    height: 35px;
  }

  .totp-icon {
    font-size: 16px;
  }
}

/* OAuth2 Device Verification Styles */
.device-verification-container {
  width: 100%;
}

.device-verification-info {
  margin-bottom: 20px;
  text-align: center;
}

.device-verification-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin: 0;
}

.device-code-label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
  font-size: 14px;
  text-align: left;
}

.device-code-label .required {
  color: #f44336;
  margin-left: 3px;
}

.device-verification-help {
  margin: 20px 0;
}

.help-box {
  background-color: #f0f8ff;
  border: 1px solid rgb(0, 0, 153);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  gap: 12px;
}

.help-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.help-content {
  flex: 1;
}

.help-title {
  font-weight: bold;
  color: rgb(0, 0, 153);
  margin: 0 0 8px 0;
  font-size: 14px;
}

.help-steps {
  margin: 0;
  padding-left: 20px;
  color: #333;
}

.help-steps li {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.4;
}

/* Responsive adjustments for device verification */
@media (max-width: 768px) {
  .help-box {
    flex-direction: column;
    gap: 8px;
  }

  .help-icon {
    align-self: center;
  }
}

/* Select Authenticator Styles */
.auth-method-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.auth-method-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px;
  background-color: #F8F8F8;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  font-size: 14px;
}

.auth-method-item:hover {
  border-color: rgb(0, 0, 153);
  background-color: rgba(0, 0, 153, 0.05);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.auth-method-item:focus {
  outline: 2px solid rgb(0, 0, 153);
  outline-offset: 2px;
}

.auth-method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid #ddd;
  margin-right: 15px;
  flex-shrink: 0;
}

.auth-method-icon i {
  font-size: 18px;
  color: rgb(0, 0, 153);
}

.auth-method-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-method-heading {
  font-weight: bold;
  color: #333;
  font-size: 14px;
  margin: 0;
}

.auth-method-description {
  color: #666;
  font-size: 12px;
  line-height: 1.3;
  margin: 0;
}

.auth-method-fill {
  flex: 1;
}

.auth-method-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #999;
  flex-shrink: 0;
}

.auth-method-arrow i {
  font-size: 12px;
}

/* Icon fallback for arrow if font icon isn't available */
.icon-arrow-right::before {
  content: '→';
  font-size: 16px;
  font-weight: bold;
}

/* Responsive adjustments for select authenticator */
@media (max-width: 768px) {
  .auth-method-item {
    padding: 12px;
  }

  .auth-method-icon {
    width: 35px;
    height: 35px;
    margin-right: 12px;
  }

  .auth-method-icon i {
    font-size: 16px;
  }
}