.form-log-in,
.form-log-in * {
  box-sizing: border-box;
}
.login-background {
  background: var(--global-light-background, undefined);
  overflow: hidden;
  display: flex; /* Použijeme Flexbox */
  justify-content: center; /* Horizontálne centrovanie */
  align-items: center;   /* Vertikálne centrovanie */
  min-height: 100vh;     /* Zabezpečí, že kontajner zaberá celú výšku viewportu */
  width: 100vw;          /* Zabezpečí, že kontajner zaberá celú šírku viewportu */
  margin: 0;
  padding: 0;
}
.form-log-in {
  background: var(--dark-mode-background-color, #3b0c51);
  border-radius: var(--var-sds-size-radius-200, 0.5rem);
  border-style: solid;
  border-color: var(--dark-mode-background-color-stroke);
  border-width: 0.1875rem;
  padding: var(--var-sds-size-space-600, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--var-sds-size-space-600, 1.5rem);
  align-items: flex-start;
  justify-content: flex-start;
  width: 20rem;
  position: absolute;
  
  /* Centering */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.form-log-in__input-field {
  display: flex;
  flex-direction: column;
  gap: var(--var-sds-size-space-200, 0.5rem);
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.form-log-in__label {
  color: var(--dark-mode-text-color, #ffffff);
  text-align: left;
  font-family: var(--body-base-font-family, "Inter-Regular", sans-serif);
  font-size: var(--body-base-font-size, 1rem);
  line-height: var(--body-base-line-height, 140%);
  font-weight: var(--body-base-font-weight, 400);
  position: relative;
  align-self: stretch;
}
.form-log-in__input {
  background: var(--var-sds-color-background-default-default, #ffffff);
  border-radius: var(--var-sds-size-radius-200, 0.5rem);
  border-style: solid;
  border-color: var(--var-sds-color-border-default-default, #d9d9d9);
  border-width: 0.0625rem;
  padding: var(--var-sds-size-space-300, 0.75rem)
    var(--var-sds-size-space-400, 1rem) var(--var-sds-size-space-300, 0.75rem)
    var(--var-sds-size-space-400, 1rem);
  display: flex;
  flex-direction: row;
  gap: 0rem;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  min-width: 15rem;
  position: relative;
  overflow: hidden;
}
.form-log-in__value {
  color: var(--var-sds-color-text-default-tertiary, #b3b3b3);
  text-align: left;
  font-family: var(
    --single-line-body-base-font-family,
    "Inter-Regular",
    sans-serif
  );
  font-size: var(--single-line-body-base-font-size, 1rem);
  line-height: var(--single-line-body-base-line-height, 100%);
  font-weight: var(--single-line-body-base-font-weight, 400);
  position: relative;
  flex: 1;
}
.form-log-in__button-group {
  display: flex;
  flex-direction: row;
  gap: var(--var-sds-size-space-400, 1rem);
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.form-log-in__button {
  background: var(--dark-mode-button-dark, #d433d2);
  border-color: var(--dark-mode-button-light);
  border-radius: var(--var-sds-size-radius-200, 0.5rem);
  padding: var(--var-sds-size-space-300, 0.75rem);
  display: flex;
  flex-direction: row;
  gap: var(--var-sds-size-space-200, 0.5rem);
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.form-log-in__star {
  filter: invert(1) brightness(2);
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  overflow: visible;
}
.form-log-in__button2 {
  color: var(--dark-mode-button-text-dark);
  text-align: left;
  font-family: var(
    --single-line-body-base-font-family,
    "Inter-Regular",
    sans-serif
  );
  font-size: var(--single-line-body-base-font-size, 1rem);
  line-height: var(--single-line-body-base-line-height, 100%);
  font-weight: var(--single-line-body-base-font-weight, 400);
  position: relative;
}
.status-menu-frame {
  width: 14.063rem;
  height: 26.25rem;
  position: absolute;
  right: 0rem;
  top: 0rem;
}
.status__e-comet-logo{
  width: 12.5rem;
  height: 12.5rem;
  position: absolute;
  right: 0.625rem;
  top: 0.625rem;
  object-fit: cover;
}
.status__logo-frame {
  padding: 0.125rem;
  width: 4.25rem;
  height: 7.5rem;
  position: absolute;
  left: 9.813rem;
  top: 14.688rem;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Arrange icons vertically */
  justify-content: space-around; /* Even spacing between icons */
  align-items: center; /* Center icons horizontally */
}
.clickable {
  cursor: pointer;
}

/* Light mode   */
.form-log-in.mode-light {
  background: var(--light-mode-background-color);
  border-color: var(--light-mode-background-color-stroke);
}
.form-log-in__label.mode-light {
  color: var(--light-mode-text-color);
}
.form-log-in__button.mode-light {
  background: var(--light-mode-button-light);
  border-color: var(--light-mode-button-dark);
}
.form-log-in__star.mode-light {
  filter: invert(1) brightness(2);
}
.form-log-in__button2.mode-light {
  color: var(--light-mode-button-text-dark);
}
#error-message {
  display: none; /* Hidden by default */
  background-color: var(--error-message-background);
  color: var(--error-message-color);
  padding: 20px;
  margin: 20px;
  border: 1px solid #f5c6cb;
  border-radius: 5px;
  position: absolute;
  top: 10px;
}
#info-message {
  display: none; /* Hidden by default */
  background-color: var(--info-message-background);
  color: var(--info-message-color);
  padding: 20px;
  margin: 20px;
  border: 1px solid #f5c6cb;
  border-radius: 5px;
  position: absolute;
  top: 10px;
}