:host {
  .grid {
    display: grid;
    gap: 10px;
    margin-bottom: 35px;

    & app-cmf-password-field {
      display: block;
    }
  }
}

div.input {
  display: flex;
  align-items: center;

  max-width: 100%;
  padding: 5px;

  border: 1px solid var(--color-gray-444);
  border-radius: 5px;

  input {
    background: inherit;
    border: none;
    outline: none;

    &::placeholder {
      color: var(--color-gray-888);
    }

    &:focus-visible {
      outline: none;
    }
  }
}

$alertBGColor: 'var(--theme-hack-bg2-color,hsl(from var(--color-alert-red) h s calc(l + 45)));';

.alert {
  display: flex;
  flex: 1 1 auto;
  flex-flow: row nowrap;
  gap: 12px;

  padding: 12px;

  background-color: unquote($alertBGColor);
  border-radius: 5px;

  .icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    font-size: x-large;
    color: white;

    background-color: var(--color-alert-red);
    border-radius: 50%;
  }

  .message {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: center;

    color: var(--color-gray-444);

    background: none;
  }
}

.help {
  font-size: small;
  color: var(--color-gray-666);
}

div[cmf-dialog-content] {
  display: flex;
  flex-flow: column nowrap;
  gap: 14px;

  width: 500px;
  max-width: 500px;

  p {
    margin: 0;
  }
}

.help-input {
  pointer-events: none;
  color: var(--color-gray-666) !important;
  border: none;
  outline: none;
}

.wrong-password {
  border-color: red;
}

.wrong-password-text {
  color: red;
}