/* ==========================================================
   EVERYONE ASSEMBLE
   RPG RELATIONS
   ========================================================== */

/* ==========================================================
   GRUNDLAGEN UND FARBEN
   ========================================================== */

.rrel-ucp,
.rrel-profile{
    --rr-bg:#020d18;
    --rr-bg-deep:#010914;
    --rr-panel:#04192b;
    --rr-panel-soft:#082b45;
    --rr-panel-light:#0b3150;
    --rr-line:#1d5f8f;
    --rr-line-soft:rgba(33,139,208,.16);
    --rr-accent:#218bd0;
    --rr-accent-light:#75d0ff;
    --rr-text:#c4d8e4;
    --rr-text-light:#e1f1fa;
    --rr-muted:#8fa9bc;
    --rr-success:#74c5a3;
    --rr-danger:#d47f87;
    --rr-warning:#e0b26d;

    width:100%;

    color:var(--rr-text);

    font-family:Arial,sans-serif;
    font-size:13px;
    line-height:1.6;
}

.rrel-ucp{
    max-width:1180px;
    margin:24px auto 40px;
}

.rrel-ucp *,
.rrel-ucp *:before,
.rrel-ucp *:after,
.rrel-profile *,
.rrel-profile *:before,
.rrel-profile *:after{
    box-sizing:border-box;
}

.rrel-ucp a,
.rrel-profile a{
    color:var(--rr-accent-light);

    text-decoration:none;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.rrel-ucp a:hover,
.rrel-profile a:hover{
    color:var(--rr-text-light);

    text-decoration:none;
}

/* ==========================================================
   SEITENKOPF
   ========================================================== */

.rrel-hero{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;

    min-height:155px;
    margin-bottom:17px;
    padding:27px 30px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 30% 145%,
            rgba(33,139,208,.24),
            transparent 50%
        ),
        linear-gradient(
            90deg,
            rgba(33,139,208,.08),
            transparent 55%,
            rgba(33,139,208,.045)
        ),
        var(--rr-bg-deep);

    border:1px solid rgba(33,139,208,.31);
    border-left:5px solid var(--rr-accent);
    border-bottom:2px solid #1674b5;

    box-shadow:
        0 18px 42px rgba(0,0,0,.31),
        inset 0 1px rgba(255,255,255,.025);
}

.rrel-hero:before{
    content:"";

    position:absolute;
    top:0;
    left:31px;

    width:220px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--rr-accent-light),
            transparent
        );
}

.rrel-hero:after{
    content:"RELATION DATABASE";

    position:absolute;
    right:18px;
    bottom:10px;

    color:rgba(117,208,255,.055);

    font-family:Antonio,Arial,sans-serif;
    font-size:20px;
    font-weight:700;
    line-height:1;

    letter-spacing:4px;

    pointer-events:none;
}

.rrel-hero-copy{
    position:relative;
    z-index:1;

    min-width:0;
}

.rrel-kicker{
    display:block;

    margin-bottom:5px;

    color:var(--rr-muted);

    font-family:Antonio,Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:2.3px;
    text-transform:uppercase;
}

.rrel-title{
    display:block;

    margin:0;

    color:var(--rr-accent-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:30px;
    font-weight:700;
    line-height:1.2;

    letter-spacing:2px;
    text-transform:uppercase;

    overflow-wrap:anywhere;

    text-shadow:0 0 20px rgba(33,139,208,.22);
}

.rrel-intro{
    display:block;

    max-width:670px;
    margin-top:8px;

    color:var(--rr-muted);

    font-size:12px;
    line-height:1.65;
}

/* ==========================================================
   STATISTIK
   ========================================================== */

.rrel-stats{
    position:relative;
    z-index:1;

    display:grid;
    grid-template-columns:repeat(2,minmax(110px,1fr));
    gap:8px;

    min-width:260px;
}

.rrel-stat{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    min-height:76px;
    padding:9px 12px;

    background:rgba(2,13,24,.60);

    border:1px solid rgba(33,139,208,.19);
    border-left:2px solid rgba(33,139,208,.48);

    text-align:center;
}

.rrel-stat-number{
    color:var(--rr-accent-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:23px;
    font-weight:700;
    line-height:1.15;

    letter-spacing:1px;
}

.rrel-stat-label{
    margin-top:4px;

    color:var(--rr-muted);

    font-size:10px;
    line-height:1.4;

    text-transform:uppercase;
}

/* ==========================================================
   HINWEISE UND MELDUNGEN
   ========================================================== */

.rrel-notice{
    width:100%;
    margin-bottom:16px;
}

.rrel-notice:empty{
    display:none;
}

.rrel-notice .red_alert,
.rrel-notice .pm_alert,
.rrel-notice .error,
.rrel-notice > div{
    margin:0;
    padding:12px 14px;

    color:var(--rr-text);
    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.09),
            transparent 75%
        ),
        var(--rr-panel);

    border:1px solid rgba(33,139,208,.22);
    border-left:4px solid var(--rr-accent);

    font-size:12px;
    line-height:1.65;
}

.rrel-notice .red_alert,
.rrel-notice .error{
    background:
        linear-gradient(
            90deg,
            rgba(212,127,135,.09),
            transparent 75%
        ),
        var(--rr-panel);

    border-color:rgba(212,127,135,.28);
    border-left-color:var(--rr-danger);
}

/* ==========================================================
   TABS
   ========================================================== */

.rrel-tabs{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;

    width:100%;
    margin:0 0 17px;
}

.rrel-tab{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-width:0;
    min-height:47px;
    padding:9px 11px;

    color:var(--rr-muted);
    background:rgba(2,13,24,.55);

    border:1px solid rgba(33,139,208,.18);
    border-left:2px solid rgba(33,139,208,.36);

    font-family:Antonio,Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1.35;

    letter-spacing:.7px;
    text-align:center;
    text-transform:uppercase;
}

.rrel-tab:hover{
    color:var(--rr-accent-light);
    background:var(--rr-panel-soft);

    border-color:rgba(33,139,208,.42);
}

.rrel-tab.is-active{
    color:var(--rr-text-light);

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.16),
            transparent 80%
        ),
        var(--rr-panel-soft);

    border-color:var(--rr-accent);
    border-left-color:var(--rr-accent-light);

    box-shadow:
        inset 0 -2px var(--rr-accent),
        0 7px 18px rgba(0,0,0,.18);
}

.rrel-tab-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:22px;
    height:22px;
    padding:0 6px;

    color:var(--rr-bg-deep);
    background:var(--rr-accent-light);

    border-radius:50%;

    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1;
}

.rrel-tab:not(.is-active) .rrel-tab-count{
    color:var(--rr-accent-light);
    background:rgba(33,139,208,.14);

    border:1px solid rgba(33,139,208,.25);
}

/* ==========================================================
   TAB-INHALTE
   ========================================================== */

.rrel-tab-panel{
    display:none;
}

.rrel-tab-panel.is-active{
    display:block;
}

.rrel-create-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:17px;
}

/* ==========================================================
   PANELS
   ========================================================== */

.rrel-panel{
    width:100%;
    min-width:0;

    overflow:hidden;

    color:var(--rr-text);

    background:
        linear-gradient(
            145deg,
            rgba(8,43,69,.54),
            rgba(2,13,24,.86)
        );

    border:1px solid rgba(33,139,208,.20);
    border-left:3px solid #1674b5;

    box-shadow:0 10px 24px rgba(0,0,0,.20);
}

.rrel-panel-wide{
    grid-column:1 / -1;
}

.rrel-panel-head{
    position:relative;

    display:flex;
    align-items:center;

    min-height:52px;
    margin:0;
    padding:11px 14px;

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.12),
            transparent 72%
        ),
        var(--rr-bg-deep);

    border-bottom:1px solid rgba(33,139,208,.19);
}

.rrel-panel-head:after{
    content:"";

    position:absolute;
    bottom:-1px;
    left:14px;

    width:63px;
    height:2px;

    background:var(--rr-accent);
}

.rrel-panel-title{
    display:block;

    margin:0;

    color:var(--rr-accent-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:15px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.9px;
    text-transform:uppercase;
}

.rrel-panel-body{
    padding:14px;
}

/* ==========================================================
   FORMULARE
   ========================================================== */

.rrel-form{
    display:grid;
    gap:6px;

    width:100%;
}

.rrel-form-group{
    display:grid;
    gap:5px;

    width:100%;
    min-width:0;
}

.rrel-form-label,
.rrel-form label{
    display:block;

    margin:5px 0 0;

    color:var(--rr-muted);

    font-family:Antonio,Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1.45;

    letter-spacing:.7px;
    text-transform:uppercase;
}

.rrel-form-label small,
.rrel-form label small{
    color:var(--rr-muted);

    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:400;

    letter-spacing:0;
    text-transform:none;
}

.rrel-required{
    margin-left:3px;

    color:var(--rr-danger);
}

.rrel-form input[type="text"],
.rrel-form input[type="url"],
.rrel-form input[type="number"],
.rrel-form select,
.rrel-form textarea,
.rrel-manage-row input[type="text"],
.rrel-manage-row input[type="url"],
.rrel-manage-row select,
.rrel-manage-row textarea,
.rrel-request-answer input[type="text"],
.rrel-request-answer select,
.rrel-request-answer textarea{
    width:100%;
    min-width:0;
    min-height:41px;
    margin:0;
    padding:8px 10px;

    color:var(--rr-text-light);
    background:var(--rr-bg-deep);

    border:1px solid rgba(33,139,208,.25);
    border-radius:0;

    font-family:Arial,sans-serif;
    font-size:12px;
    line-height:1.45;

    outline:none;

    color-scheme:dark;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.rrel-form textarea,
.rrel-manage-row textarea,
.rrel-request-answer textarea{
    min-height:85px;

    resize:vertical;
}

.rrel-form input:focus,
.rrel-form select:focus,
.rrel-form textarea:focus,
.rrel-manage-row input:focus,
.rrel-manage-row select:focus,
.rrel-manage-row textarea:focus,
.rrel-request-answer input:focus,
.rrel-request-answer select:focus,
.rrel-request-answer textarea:focus{
    background:#031426;

    border-color:var(--rr-accent);

    box-shadow:0 0 0 1px rgba(33,139,208,.18);
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.rrel-ucp .button,
.rrel-ucp button,
.rrel-profile .button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:35px;
    padding:7px 11px;

    color:var(--rr-accent-light);
    background:var(--rr-bg-deep);

    border:1px solid rgba(33,139,208,.28);
    border-radius:0;

    font-family:Antonio,Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1.3;

    letter-spacing:.7px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;

    cursor:pointer;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.rrel-ucp .button:hover,
.rrel-ucp button:hover,
.rrel-profile .button:hover{
    color:var(--rr-text-light);
    background:var(--rr-panel-light);

    border-color:var(--rr-accent);

    transform:translateY(-1px);
}

.rrel-form > .button{
    justify-self:end;

    margin-top:8px;
}

.rrel-danger{
    color:var(--rr-danger) !important;

    border-color:rgba(212,127,135,.34) !important;
}

.rrel-danger:hover{
    color:#180a0c !important;
    background:var(--rr-danger) !important;

    border-color:var(--rr-danger) !important;
}

.rrel-success{
    color:var(--rr-success) !important;

    border-color:rgba(116,197,163,.34) !important;
}

.rrel-success:hover{
    color:#071711 !important;
    background:var(--rr-success) !important;

    border-color:var(--rr-success) !important;
}

/* ==========================================================
   AUTOVERVOLLSTÄNDIGUNG
   ========================================================== */

.rrel-autocomplete-wrap{
    position:relative;

    min-width:0;
}

.rrel-suggestions{
    position:absolute;
    z-index:50;
    top:calc(100% + 3px);
    right:0;
    left:0;

    max-height:220px;

    overflow-x:hidden;
    overflow-y:auto;

    background:var(--rr-bg-deep);

    border:1px solid rgba(33,139,208,.30);

    box-shadow:0 14px 31px rgba(0,0,0,.42);
}

.rrel-suggestions[hidden]{
    display:none;
}

.rrel-suggestions button{
    display:block;

    width:100%;
    min-height:39px;
    padding:8px 10px;

    color:var(--rr-text);
    background:transparent;

    border:0;
    border-bottom:1px solid rgba(33,139,208,.11);

    font-family:Arial,sans-serif;
    font-size:11px;
    font-weight:400;
    line-height:1.45;

    letter-spacing:0;
    text-align:left;
    text-transform:none;
}

.rrel-suggestions button:last-child{
    border-bottom:0;
}

.rrel-suggestions button:hover{
    color:var(--rr-accent-light);
    background:var(--rr-panel-soft);

    transform:none;
}

/* ==========================================================
   RELATIONSKATEGORIEN IM UCP
   ========================================================== */

.rrel-manage-category{
    width:100%;
    margin-bottom:14px;

    overflow:hidden;

    background:rgba(2,13,24,.38);

    border:1px solid rgba(33,139,208,.13);
    border-left:2px solid rgba(33,139,208,.40);
}

.rrel-manage-category:last-child{
    margin-bottom:0;
}

.rrel-manage-category-head{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    min-height:44px;
    padding:9px 11px;

    color:var(--rr-text-light);
    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.11),
            transparent 75%
        ),
        var(--rr-bg-deep);

    border-bottom:1px solid rgba(33,139,208,.15);

    font-family:Antonio,Arial,sans-serif;
    font-size:12px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.8px;
    text-transform:uppercase;
}

.rrel-manage-category-head:after{
    content:"";

    position:absolute;
    bottom:-1px;
    left:11px;

    width:52px;
    height:2px;

    background:var(--rr-accent);
}

.rrel-manage-category-count{
    color:var(--rr-muted);

    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:400;

    letter-spacing:0;
}

.rrel-manage-list{
    display:flex;
    flex-direction:column;
    gap:8px;

    padding:9px;
}

/* ==========================================================
   RELATION VERWALTEN
   ========================================================== */

.rrel-manage-row{
    display:grid;
    grid-template-columns:minmax(190px,.8fr) minmax(270px,1.6fr) 145px;
    gap:11px;
    align-items:start;

    width:100%;
    min-width:0;
    padding:10px;

    color:var(--rr-text);
    background:rgba(2,13,24,.54);

    border:1px solid rgba(33,139,208,.12);
    border-left:2px solid rgba(33,139,208,.37);
}

.rrel-manage-person,
.rrel-request-person{
    display:flex;
    align-items:center;
    gap:10px;

    min-width:0;
}

.rrel-manage-person img,
.rrel-request-person img{
    display:block;

    width:42px;
    height:50px;
    flex:0 0 42px;

    object-fit:cover;
    object-position:center top;

    border:1px solid rgba(33,139,208,.26);
}

.rrel-manage-person-copy,
.rrel-request-person-copy{
    min-width:0;
}

.rrel-manage-name,
.rrel-request-name{
    display:block;

    color:var(--rr-text-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:12px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.5px;
    text-transform:uppercase;

    overflow-wrap:anywhere;
}

.rrel-manage-meta,
.rrel-request-meta{
    display:block;

    margin-top:3px;

    color:var(--rr-muted);

    font-size:10px;
    line-height:1.45;

    overflow-wrap:anywhere;
}

.rrel-manage-fields{
    display:grid;
    grid-template-columns:minmax(130px,.65fr) minmax(150px,1fr);
    gap:8px;

    min-width:0;
}

.rrel-description-field{
    grid-column:1 / -1;
}

.rrel-npc-fields{
    display:grid;
    grid-column:1 / -1;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.rrel-manage-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:5px;

    min-width:0;
}

.rrel-manage-actions .button,
.rrel-manage-actions button{
    flex:1 1 100%;
}

.rrel-manage-actions .rrel-icon{
    flex:1 1 calc(50% - 3px);
}

.rrel-icon{
    min-width:35px;
}

/* ==========================================================
   ANFRAGEN
   ========================================================== */

.rrel-request-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.rrel-request-row{
    display:grid;
    grid-template-columns:minmax(210px,.75fr) minmax(0,1.25fr);
    gap:13px;
    align-items:center;

    width:100%;
    min-width:0;
    padding:11px;

    color:var(--rr-text);
    background:rgba(2,13,24,.52);

    border:1px solid rgba(33,139,208,.13);
    border-left:2px solid rgba(33,139,208,.40);
}

.rrel-request-row-outgoing{
    grid-template-columns:minmax(0,1fr) auto;
}

.rrel-request-description{
    max-width:520px;
    max-height:95px;
    margin-top:7px;
    padding:7px 8px;

    overflow-x:hidden;
    overflow-y:auto;

    color:var(--rr-text);
    background:rgba(1,9,20,.57);

    border:1px solid rgba(33,139,208,.10);
    border-left:2px solid rgba(33,139,208,.30);

    font-size:10px;
    line-height:1.55;

    white-space:normal;
    overflow-wrap:anywhere;
}

.rrel-request-answer{
    display:grid;
    grid-template-columns:minmax(125px,.65fr) minmax(150px,1fr) auto auto;
    gap:7px;
    align-items:start;

    min-width:0;
}

.rrel-request-description-input{
    grid-column:1 / -1;
}

.rrel-request-row > form:not(.rrel-request-answer){
    margin:0;
}

/* ==========================================================
   LEERE BEREICHE
   ========================================================== */

.rrel-empty{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:85px;
    padding:16px;

    color:var(--rr-muted);
    background:rgba(2,13,24,.43);

    border:1px dashed rgba(33,139,208,.24);

    font-size:11px;
    line-height:1.6;

    text-align:center;
}

/* ==========================================================
   PROFILANSICHT
   ========================================================== */

.rrel-profile{
    width:100%;
    margin:22px 0;
    padding:0;

    overflow:hidden;

    color:var(--rr-text);

    background:
        linear-gradient(
            145deg,
            rgba(8,43,69,.53),
            rgba(2,13,24,.86)
        );

    border:1px solid rgba(33,139,208,.20);
    border-left:4px solid var(--rr-accent);

    box-shadow:0 12px 29px rgba(0,0,0,.22);
}

.rrel-profile-head{
    position:relative;

    display:flex;
    flex-direction:column;

    min-height:74px;
    margin:0;
    padding:13px 16px;

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.12),
            transparent 72%
        ),
        var(--rr-bg-deep);

    border-bottom:1px solid rgba(33,139,208,.19);
}

.rrel-profile-head:after{
    content:"";

    position:absolute;
    bottom:-1px;
    left:16px;

    width:68px;
    height:2px;

    background:var(--rr-accent);
}

.rrel-profile-kicker{
    color:var(--rr-muted);

    font-family:Antonio,Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1.35;

    letter-spacing:1.8px;
    text-transform:uppercase;
}

.rrel-profile-title{
    display:block;

    margin-top:3px;

    color:var(--rr-accent-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:22px;
    font-weight:700;
    line-height:1.3;

    letter-spacing:1.2px;
    text-transform:uppercase;
}

.rrel-profile-categories{
    display:flex;
    flex-direction:column;
    gap:15px;

    padding:15px;
}

/* ==========================================================
   PROFILKATEGORIEN
   ========================================================== */

.rrel-profile-category{
    width:100%;
    min-width:0;

    overflow:hidden;

    background:rgba(2,13,24,.40);

    border:1px solid rgba(33,139,208,.13);
    border-left:2px solid rgba(33,139,208,.42);
}

.rrel-profile-category-head{
    position:relative;

    display:flex;
    align-items:center;

    min-height:44px;
    padding:9px 11px;

    color:var(--rr-text-light);
    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.11),
            transparent 75%
        ),
        var(--rr-bg-deep);

    border-bottom:1px solid rgba(33,139,208,.15);

    font-family:Antonio,Arial,sans-serif;
    font-size:13px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.8px;
    text-transform:uppercase;
}

.rrel-profile-category-head:after{
    content:"";

    position:absolute;
    bottom:-1px;
    left:11px;

    width:54px;
    height:2px;

    background:var(--rr-accent);
}

.rrel-profile-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    width:100%;
    min-width:0;
    padding:9px;

    overflow-x:hidden;
    overflow-y:visible;

    scrollbar-gutter:stable;
}

.rrel-profile-list.rrel-has-overflow{
    max-height:var(--rrel-visible-row-height,150px);
    padding-right:7px;

    overflow-y:auto;
}

/* ==========================================================
   PROFILKARTEN
   ========================================================== */

.rrel-card{
    display:grid;
    grid-template-columns:70px minmax(0,1fr);
    gap:11px;
    align-items:start;

    width:100%;
    min-width:0;
    min-height:109px;
    padding:10px;

    color:var(--rr-text);
    background:
        linear-gradient(
            145deg,
            rgba(8,43,69,.47),
            rgba(2,13,24,.72)
        );

    border:1px solid rgba(33,139,208,.12);
    border-left:2px solid rgba(33,139,208,.38);

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.rrel-card:hover{
    background:
        linear-gradient(
            145deg,
            rgba(11,49,80,.64),
            rgba(2,13,24,.76)
        );

    border-color:rgba(33,139,208,.28);
    border-left-color:var(--rr-accent);

    transform:translateY(-1px);
}

.rrel-card > img{
    display:block;

    width:var(--rrel-avatar-w,70px);
    height:var(--rrel-avatar-h,85px);
    max-width:70px;
    max-height:85px;

    object-fit:cover;
    object-position:center top;

    border:1px solid rgba(33,139,208,.27);
}

.rrel-card-content{
    min-width:0;
}

.rrel-card-name{
    color:var(--rr-text-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:14px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.6px;
    text-transform:uppercase;

    overflow-wrap:anywhere;
}

.rrel-card-relation{
    margin:3px 0 7px;

    color:var(--rr-accent-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.7px;
    text-transform:uppercase;
}

.rrel-card-description{
    max-height:90px;
    margin:0 0 8px;
    padding:6px 7px;

    overflow-x:hidden;
    overflow-y:auto;

    color:var(--rr-text);
    background:rgba(1,9,20,.46);

    border:1px solid rgba(33,139,208,.09);
    border-left:2px solid rgba(33,139,208,.30);

    font-size:10px;
    line-height:1.55;

    overflow-wrap:anywhere;
}

.rrel-card-facts{
    display:flex;
    flex-direction:column;
    gap:3px;

    color:var(--rr-muted);

    font-size:10px;
    line-height:1.45;
}

.rrel-card-facts span{
    overflow-wrap:anywhere;
}

.rrel-card-facts b{
    color:var(--rr-text-light);

    font-weight:700;
}

.rrel-card.rrel-no-avatar{
    grid-template-columns:1fr;
}

/* ==========================================================
   SCROLLBARS
   ========================================================== */

.rrel-card-description,
.rrel-request-description,
.rrel-profile-list,
.rrel-suggestions{
    scrollbar-width:thin;
    scrollbar-color:#1674b5 var(--rr-bg-deep);
}

.rrel-card-description::-webkit-scrollbar,
.rrel-request-description::-webkit-scrollbar,
.rrel-profile-list::-webkit-scrollbar,
.rrel-suggestions::-webkit-scrollbar{
    width:7px;
    height:7px;
}

.rrel-card-description::-webkit-scrollbar-track,
.rrel-request-description::-webkit-scrollbar-track,
.rrel-profile-list::-webkit-scrollbar-track,
.rrel-suggestions::-webkit-scrollbar-track{
    background:var(--rr-bg-deep);
}

.rrel-card-description::-webkit-scrollbar-thumb,
.rrel-request-description::-webkit-scrollbar-thumb,
.rrel-profile-list::-webkit-scrollbar-thumb,
.rrel-suggestions::-webkit-scrollbar-thumb{
    background:#1674b5;

    border:2px solid var(--rr-bg-deep);
}

/* ==========================================================
   USERCP-NAVIGATION
   ========================================================== */

.usercp_nav_rpgrelations{
    position:relative;

    padding-left:23px !important;
}

.usercp_nav_rpgrelations:before{
    content:"";

    position:absolute;
    top:50%;
    left:8px;

    width:7px;
    height:7px;

    background:#218bd0;

    border:1px solid #75d0ff;

    transform:translateY(-50%) rotate(45deg);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media screen and (max-width:950px){

    .rrel-create-grid{
        grid-template-columns:1fr;
    }

    .rrel-manage-row{
        grid-template-columns:1fr;
    }

    .rrel-manage-actions{
        justify-content:flex-start;
    }

    .rrel-manage-actions .button,
    .rrel-manage-actions button{
        flex:0 1 auto;
    }

    .rrel-request-row{
        grid-template-columns:1fr;
    }

    .rrel-request-row-outgoing{
        grid-template-columns:minmax(0,1fr) auto;
    }
}

@media screen and (max-width:800px){

    .rrel-hero{
        align-items:flex-start;
        flex-direction:column;
    }

    .rrel-stats{
        width:100%;
    }

    .rrel-tabs{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .rrel-request-answer{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .rrel-request-answer .button{
        width:100%;
    }
}

@media screen and (max-width:650px){

    .rrel-ucp{
        margin:14px auto 30px;
    }

    .rrel-hero{
        min-height:125px;
        padding:22px 14px;
    }

    .rrel-hero:after{
        display:none;
    }

    .rrel-title{
        font-size:24px;
    }

    .rrel-tabs{
        grid-template-columns:1fr;
    }

    .rrel-tab{
        justify-content:space-between;

        text-align:left;
    }

    .rrel-stats{
        grid-template-columns:1fr 1fr;
    }

    .rrel-panel-body{
        padding:10px;
    }

    .rrel-manage-fields,
    .rrel-npc-fields,
    .rrel-request-answer{
        grid-template-columns:1fr;
    }

    .rrel-description-field,
    .rrel-request-description-input{
        grid-column:auto;
    }

    .rrel-request-row-outgoing{
        grid-template-columns:1fr;
    }

    .rrel-request-row-outgoing > form .button{
        width:100%;
    }

    .rrel-profile-categories{
        padding:10px;
    }

    .rrel-profile-list{
        grid-template-columns:1fr;
    }

    .rrel-profile-list.rrel-has-overflow{
        max-height:var(--rrel-visible-row-height,150px);
    }
}

@media screen and (max-width:430px){

    .rrel-stats{
        grid-template-columns:1fr;
    }

    .rrel-card{
        grid-template-columns:70px minmax(0,1fr);
    }

    .rrel-manage-actions .button,
    .rrel-manage-actions button{
        width:100%;
        flex-basis:100%;
    }
}