body {
  font-family:
    "Roboto",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  width: 100%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-align: center;
}

input {
  width: 100%;
  margin-left: 4px;
}

button {
  cursor: pointer;
  width: 100%;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-top: 4px;
}

a {
  display: block;
  margin-top: 20px;
}

label {
  display: block;
  width: 110px;
}

.input-group {
  display: flex;
  margin-bottom: 4px;
}

.error {
  color: red;
  font-size: 14px;
}

.logo-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: -50px;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.online-status {
  color: #00ff00;
  font-weight: 500;
}

.offline-status {
  color: red;
  font-weight: 500;
}