.relation-box-container {
	background-color: var(--background-color);
	padding: var(--20px);
	text-align: center;
}

.relation-wrapper {
grid-gap: var(--15px);
margin-top: var(--20px);
grid-template-columns: 1fr 1fr 1fr;
}

.relation-box-scroll-text {
overflow: auto;
	text-align: justify;
}

.relation-icon-container {
	display: flex;
	justify-content: center;
	margin-top: .5rem;
}

.relation-icon-container a{
	margin: 3px;
}

.relation-banner {
	background-color: #689368;
	padding: 10px 40px;
	text-align: center;
	color: var(--hover-color);
}

.form-npc-container {
  display: grid;
  grid-gap: var(--10px);
  margin-top: var(--10px);
  grid-template-areas: "category name relation" "desc desc desc";
}

.form-npc-container > select {
	grid-area: category;
}

.form-npc-container > input:nth-child(2) {
	grid-area: name;
}

.form-npc-container > input:nth-child(3) {
	grid-area: relation;
}

.form-npc-container > textarea {
	grid-area: desc;
}

.relation-profile-form {
  display: grid;
  grid-gap: var(--10px);
  grid-template: "character category relation" "desc desc desc" "info info info" "submit submit submit";
	grid-template-columns: 1fr 1fr 1fr;
}

.relation-profile-form > #characterSelect {
	grid-area: character;
}

.relation-profile-form > #categoriesSelect {
	grid-area: category;
}

.relation-profile-form > input {
	grid-area: relation;
}

.relation-profile-form > textarea {
  grid-area: desc;
}

.relation-profile-form > div {
  grid-area: info;
}

.relation-profile-form > input[type="submit"] {
	grid-area: submit;
	width: 50%;
	margin: auto;
}

.profile-fact-box {
  color: var(--accent-color);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .8px;
}

.relation-profile-wrapper {
	display: grid;
	grid-gap: var(--10px);
	grid-template-columns: 1fr 1fr 1fr;
	margin: var(--10px) 0;
}

.relation-reuqest-wrapper {
  display: flex;
  flex-wrap: wrap;
  grid-gap: var(--15px);
}