* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.nav-bar {
  padding: 16px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  gap: 16px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
a {
  color: black;
  text-decoration: unset;
}
input,
select {
  padding: 0;
  margin: 0;
  height: 40px;
  outline: none;
  background: rgba(66, 76, 192, 0.02);
  border: 1px solid #d6d9fe;
  border-radius: 4px;
  padding: 8px 16px;
}
label {
  padding-left: 16px;
}

button {
  padding: 8px 16px;
  border-radius: 4px;
  background-color: transparent;
  border: 1px solid #d6d9fe;
  height: 40px;
  cursor: pointer;
}

.form-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
}
.input-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.style-id-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.text-area {
  min-height: 100px;
  width: 100%;
  background: rgba(66, 76, 192, 0.02);
  border: 1px solid #d6d9fe;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 10px 16px;
  resize: none;

  font-size: 14px;
  line-height: 20px;
}

.id-type {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 40%;
  max-height: 65%;
  margin-top: 15%;
}

.credential-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.error-notification {
  padding: 16px;
  font-size: 16px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ff5757;
  border-radius: 4px;
  visibility: hidden;
  text-align: center;
  color: #fff;
}