.relation_flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.relation_box{
	width: 45%;
	box-sizing: border-box;
	margin: 10px 2px;
}

.npc_relations {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content min-content min-content min-content; 
  gap: 5px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    "charaname charaname"
    "relationstype shortfacts"
    "relationstext relationstext"
    "relationsubmit relationsubmit";
	width: 50%;
	text-align: center;
	margin: auto;
}


.charaname { grid-area: charaname; }

.relationstype { grid-area: relationstype; }

.shortfacts { grid-area: shortfacts; }

.relationstext { grid-area: relationstext; }

.relationsubmit { grid-area: relationsubmit; }


.relations  {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content min-content min-content;
  gap: 5px 5px;
  grid-auto-flow: row;
  grid-template-areas:
    "relationscat relationskind"
    "relationstext relationstext"
    "relationssubmit relationssubmit";
		width: 50%;
	text-align: center;
	margin: auto;
}

.relationscat { grid-area: relationscat; }

.relationskind { grid-area: relationskind; }

.relationstext { grid-area: relationstext; }

.relationssubmit { grid-area: relationssubmit; }

.npc_relations > div, .relations > div {
	padding: 5px 10px;	
}
.npc_relations .tcat, .relations .tcat{
	margin: 5px 0;	
}

/*profile*/
.profile_box{
	width: 100%;
	margin: 10px;
	padding: 10px;
	box-sizing: border-box;
}

.profile_charaname{
	font-size 15px;
	text-align: center;
	border-bottom: 1px solid;
}

.profile_short{
	font-size: 10px;
	text-align: center;
}

.profile_relatext{
	height:100px;
	width: justify;
	overflow: auto;
	line-height: 1.2em;
}

.profile_avatar{
	height:100px;
	width: auto;
	float: left;
	margin: 2px 5px 0 1px;
}

.profile_avatar img{
	height: 100px;
	width: auto;
	float: left;
	margin: 2px 5px 0 1px;
}

.profile_options{
	width: 100%;
	text-align: center;
}

/*usercp*/

/* Style the tab */
.tabrelas {
  overflow: hidden;
  background-color: #414c46;
  margin-bottom: 15px;
}

/* Style the buttons inside the tab */
.tabrelas button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 26px;
	font-family: var(--headerfont);
	letter-spacing: 2px;
}

/* Change background color of buttons on hover */
.tabrelas button:hover {
  background-color: #db715b;
}

/* Create an active/current tablink class */
.tabrelas button.active {
  background-color: #db715b;
}

/* Style the tab content */
.tabrelascontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.relations_flex{
	display: flex;
	flex-wrap: wrap;
}

.relations_flex .relations_box{
	width: 33%;
	margin: 10px 5px;
	background: #414c46;
	box-sizing: border-box;
	padding: 2px;
}

.relations_username{
	font-size: 15px;
	text-align: center;
	font-weight: bold;
}

.relations_short{
	font-size: 11px;
	text-align: center;
	border-bottom: 1px solid #0f0f0f;
	padding: 3px 10px;
	margin-bottom: 2px;
}

.relations_text{
	font-size: 11px;
	text-align: justify;
	padding: 0 10px;
}

.relations_options{
	font-size: 13px;
	text-align: center;
	padding: 5px;
}