/*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;
        }

/* ==========================================
   RELATIONS BUTTONS & ABSTÄNDE
   ========================================== */


/* 2. Styling für die Links/Buttons (nebeneinander angeordnet) */
.memrelas-entry__item a,
.entry__item a {
	display: inline-block;
	padding: 2px 5px;
	margin: 2px;
	font-size: 11px;
font-style: inherit;
	background: #84848457;
	border: 1px solid #7f7f7f;
	color: #3b3439;
border-radius: 3px !important; /* Abgerundete Ecken */
}

/* 3. Hover-Effekt wie bei den Postbit-Buttons */
.memrelas-entry__item a:hover,
.entry__item a:hover {
    border-color: #3b3439 !important;
    color: #3b3439 !important;
    text-decoration: none !important;
}

/* 4. Namens-Links erben die Farbe der .gid-Klassen aus der gruppen.css */
.memrelas-entry__item.rel-username,
.memrelas-entry__item.rel-username a {
    background: none;    
    border: none;
    padding: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: bold !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    display: inline !important;
    text-transform: uppercase !important;
}

.memrelas-entry__item.rel-username a:hover,
.memrelas-entry__item.rel-username a:hover {
	background: #808080; !important;
	text-transform: uppercase !important;
	transition: all 0.2s ease-in-out; /* Macht den Hover-Übergang weich */
}

/* 4.1 Verhindert, dass Standard-Links die Farbe aus der gruppen.css überschreiben */
.memrelas-entry__item.rel-username a {
    color: unset;
}

/* 5. Avatare */

.memrelas-entry__item.ava .avarund,
.entry__item.ava.avarund {
    width: 50px;                  /* Breite des Avatars */
    height: 50px;                 /* Höhe des Avatars */
    background-size: cover;       /* Skaliert das Bild passend */
    background-position: center;  /* Zentriert das Bild */
    border-radius: 50%;           /* Macht den Avatar rund */
    display: block;
}

/* 6. Container-Karte als zweispaltiges Flex-Layout */
.memrelas-entry {
    display: flex;
    align-items: center;
    gap: 15px; /* Abstand zwischen Avatar und Textspalte */
    margin-bottom: 20px;
}

/* Linke Spalte: Avatar fixieren */
.memrelas-entry__item.ava {
    flex-shrink: 0;
}

/* Versteckt den Avatar-Container komplett bei NPCs ohne Bild */
.memrelas-entry__item.ava:empty {
    display: none;
}

/* Rechte Spalte: Inhalt untereinander anordnen */
.memrelas-entry__content {
    display: flex;
    flex-direction: column;
    gap: 2px; /* Kleiner Abstand zwischen Name, Job und Text */
    flex-grow: 1;
}

/* Typografie-Feinschliff */
.memrelas-entry__item.rel-username {
    font-weight: bold;
    font-size: 1.05em;
}

.memrelas-entry__item.job {
    font-size: 0.9em;
    opacity: 0.8; /* Blendet die Jobbezeichnung leicht dezent aus */
}

.memrelas-entry__item.descr {
    margin-top: 6px; /* Etwas Platz vor dem Beziehungskommentar */
    line-height: 1.4;
}

/* Kategorie- und Subkategorie-Styling */

.rela_cat_title {
    padding: 10px;
    border: 0px dashed #797674;
    border-radius: 2px;
    text-align: center;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 20px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #3b3439;
     }


.rela_cat_subtitle {
    padding: 5px;
    border: 0px dashed #1e1e1e;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 15px;
    letter-spacing: 3px;
    color: #3b3439;
     }

/* UserCP Rela Layout */

/* 1. Container flexibel nach unten aufziehen */
.ucprelas-con, 
.ucprelas-con__item, 
.ucprelas-manage, 
.ucprelas-manage__item, 
.ucprelas-addcats, 
.ucprelas-addcharas, 
.ucprelas-npcform, 
.ucprelas-openrequests, 
.ucprelas-all {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    clear: both !important;
}

/* 2. OBERES DROPDOWN (Hauptkategorie im Erstell-Formular) klein halten */
.ucprelas-addsubcats select,
#newsubcat select {
    height: 38px !important;
    max-height: 38px !important;
    min-height: 38px !important;
    line-height: normal !important;
    padding: 5px 10px !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

/* 3. UNTERE AUSWAHLBOXEN (Kategorien bei NPCs & Charas) groooß machen */
.ucprelas-npcform select,
#addachar select,
.ucprelas-npcform__item select {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    display: block !important;
    width: 100% !important;
    margin-top: 5px !important;
    margin-bottom: 15px !important;
    box-sizing: border-box !important;
}

/* 4. Abstände für Formulargruppen */
.ucprelas-npcform__item,
.ucprelas-addcats__item {
    margin-bottom: 15px !important;
    clear: both !important;
    position: relative !important;
}

/* ANFRAGE-Box im Profil */
.relas-anfrage-container {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 15px;
    margin-top: 20px;
    max-width: 450px;
    font-family: inherit !important;
}

/* Eingabefelder */
.relas-anfrage-container input[type="text"],
.relas-anfrage-container input[type="number"],
.relas-anfrage-container textarea {
    width: 100% !important;
    padding: 8px !important;
    margin-bottom: 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/* Kategorienauswahl mit dezenter, schmaler Scrollbar */
.relas-anfrage-container select {
    height: 180px !important;
    min-height: 180px !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    
    /* Schmale Scrollbar für Firefox & neuere Browser */
    scrollbar-width: thin !important;
    scrollbar-color: #777777 transparent !important;
}

/* Schmale Scrollbar für Chrome / Edge / Safari */
.relas-anfrage-container select::-webkit-scrollbar {
    width: 6px !important;
}
.relas-anfrage-container select::-webkit-scrollbar-track {
    background: transparent !important;
}
.relas-anfrage-container select::-webkit-scrollbar-thumb {
    background-color: #777777 !important;
    border-radius: 3px !important;
}

/* 1. Schriftart & Optik für "Beschreibung" exakt an Forendesign angleichen */
.relas-anfrage-container label,
.relas-anfrage-container .rela-heading-small {
    display: block !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: bold !important;
    color: #333333 !important;
    margin-bottom: 6px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

/* 2. "Anfragen"-Button in Forenoptik */
.relas-anfrage-container input[type="submit"],
.relas-anfrage-container button {
    background: #888888 !important;
    color: #333333 !important;
    border: 1px solid #777777 !important;
    border-radius: 5px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-family: inherit !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    display: inline-block !important;
}

.relas-anfrage-container input[type="submit"]:hover,
.relas-anfrage-container button:hover {
    background: #777777 !important;
    color: #000000 !important;
}