.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: 90%;
	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;
}

/*User CP */
        .ucprelas-manage {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: space-around;
        }

        .relamodal form {
          display: flex;
          flex-direction: column;
        }
        .ucprelas-con label {
            font-weight: bold;
        }

        .ucprelas-manage__item {
            width: 30%;
            overflow: auto;
            max-height: 250px;
        }
        .ucprelas-editcat {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
        }

        .ucprelas-managesubcat {
            display: flex;
            flex-direction: column;
        }

        .ucprelas-npcform__item {
            display: flex;
            flex-direction: column;
        }

        .ucprelas-addcats__item form {
            display: flex;
            flex-direction: column;
        }

        .ucprelas-toaccept__item {
            border-radius: 7px;
            width: 25%;
            background-color: #fff;
            padding: 8px;
            border: 1px solid #ccc;
        }

        .ucprelas-manage__item .ucprelas-addcharas {
            width: 100%;
        }

        .ucprelas-manage__item .ucprelas-npcform {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .ucprelas-manage__item.ucprelas-addcharas {
            width: 100%;
        }

        .ucprelas-manage__item .ucprelas-npcform form {
            flex: 0 1 30%;
            padding: 20px;
        }

        .ucprelas__item.ucprelas-user {
            border-radius: 7px;
            width: 25%;
            background-color: #fff;
            padding: 8px;
            border: 1px solid #ccc;
        }