:root {	
    --chart-primary: #0066a2;
    --chart-text: #000;
}

/* SPIELERVERZEICHNIS */
.playerdirectory {
    background: var(--designbgcolor);
}

.playerdirectory_directory {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    align-items: flex-start;
}

.playerdirectory_user {
    width: 24%;
    font-size: 10px;
}

.playerdirectory_headline {
    background: #9797971f;
    color: #ffffff;
    padding: 8px;
    font-weight: bold;
}

.playerdirectory_subline {
    background: transparent;
    color: var(--designtextcolor);
    border-top: 1px solid var(--designnavhr);
    border-bottom: 1px solid var(--designnavhr);
    padding: 6px;
    font-size: 12px;
    font-weight: bold;
}

.playerdirectory_user_information {
    padding: 5px 0;
}

.playerdirectory_user_information_item {
    padding: 1px 0;
}

.playerdirectory_user_accounts {
    height: 150px;
    overflow: auto;
    padding-top: 10px;
    scrollbar-width: thin;
}

.directory_characters {
    display: flex;
    width: 100%;
    margin-bottom: 5px;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.directory_characters_avatar {
    width: 15%;
}

.directory_characters_avatar img {
    width: 100%;
}

.directory_characters_fact {
    padding-top: 3px;
    font-size: 10px;
}

/* SPIELERSTATISTIK */
.playerdirectory_playerstat_statistic,
.playerdirectory_characterstat_statistic {
    display: flex;
    flex-flow: wrap;
    margin: 10px 0;
}

.playerdirectory_playerstat_stat,
.playerdirectory_characterstat_stat {
    width: calc(100% / 4);
    display: flex;
    flex-flow: column;
    padding: 10px 5px;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: center;
	flex: 1 1 250px;
}

.playerdirectory_playerstat_question,
.playerdirectory_characterstat_question {
    color: var(--designtextsubcolor2);
    font-size: small;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
}

.playerdirectory_playerstat_answer,
.playerdirectory_characterstat_answer {
    font-size: 11px;
	
}

.playerdirectory_charsbit {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 10px;
    justify-content: space-around; /* Ensures even spacing around items */
}

.playerdirectory_playerstat_characters,
.playerdirectory_characterstat_characters {
    font-size: 9px;
    margin: 5px;
    border: 1px solid var(--designbordercolor);
    padding: 4px; /* Increased padding for better spacing */
    flex: 1 1 calc(20% - 10px); /* Flex-grow, flex-shrink, and basis to allow flexible width */
    box-sizing: border-box; /* Ensures padding and border are included in the width */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-aligns the content */
    max-width: 200px; /* Ensures that each character container does not exceed this width */
}

.playerdirectory_playerstat_avatar,
.playerdirectory_characterstat_avatar {
    width: 100%; /* Ensures the avatar container takes full width */
    display: flex;
    justify-content: center; /* Centers the avatar within the container */
    padding: 0; /* Ensures even padding above and below the avatar */
}

.playerdirectory_playerstat_avatar img,
.playerdirectory_characterstat_avatar img {
    max-width: 100%;
    height: auto;
    display: block;
    max-width: 190px; /* Sets a maximum width for the avatars */
    width: auto; /* Ensures the aspect ratio is maintained */
}

.playerdirectory_playerstat_infos,
.playerdirectory_characterstat_infos {
    font-size: 9px;
    padding-bottom: 5px;
}

.playerdirectory_playerstat_username,
.playerdirectory_characterstat_username {
    color: var(--accent);
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    margin: 5px auto;
    font-size: 10px;
}

.playerdirectory_playerstat_ministuff,
.playerdirectory_characterstat_ministuff {
    color: var(--highlight);
    text-align: center;
    margin: 2px auto;
}

.playerdirectory_playerstat_usertitle,
.playerdirectory_characterstat_usertitle {
    border-top: 1px solid var(--designnavhr);
    border-bottom: 1px solid var(--designnavhr);
    padding: 6px;
    font-size: 12px;
    font-weight: bold;
    margin: 3px auto;
    white-space: nowrap;
}

.playerdirectory_playerstat_username a:link,
.playerdirectory_playerstat_username a:visited,
.playerdirectory_playerstat_username a:active,
.playerdirectory_playerstat_username a:hover,
.playerdirectory_characterstat_username a:link,
.playerdirectory_characterstat_username a:visited,
.playerdirectory_characterstat_username a:active,
.playerdirectory_characterstat_username a:hover {
    color: #ffffff;
}

/* INPLAYZITATET */
.playerdirectory_inplayquote {
    width: 100%;
    display: flex;
    margin: 10px;
    flex-wrap: nowrap;
    align-items: center;
}

.playerdirectory_inplayquote_avatar {
    width: 10%;
    text-align: center;
}

.playerdirectory_inplayquote_avatar img {
    border: 1px solid var(--designbordercolor);
    width: 100px;
}

.playerdirectory_inplayquote_container {
    width: 90%;
}

.playerdirectory_quote {
    width: 95%;
    margin: auto;
    font-size: 12px;
    text-align: justify;
    margin-bottom: 10px;
}

.playerdirectory_quote_user {
    text-align: right;
    width: 95%;
}

.playerdirectory_quote_user b {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
}

.playerdirectory_quote_user span {
    font-style: italic;
    font-size: 12px;
}

/* 12 MONATE STATISTIK */
/* 12 MONATE STATISTIK */
.playerdirectory_postactivity_months_headline {
    margin-bottom: 5px;
    font-size: small;
    text-align: center;
    width: 100%;
}

.playerdirectory_postactivity_months {
    text-align: center;
    margin: 10px 10px;
}

.playerdirectory_postactivity_months_poststat {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around; /* Ensures even spacing around items */
    gap: 10px;
    box-sizing: border-box;
}

.playerdirectory_postactivity_months_month {
    flex: 1 1 calc(8.33% - 10px); /* Allows each month to take up approximately 1/12 of the container width */
    max-width: calc(8.33% - 10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.playerdirectory_postactivity_months_monthname {
    color: var(--designtextsubcolor);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 7px;
    text-align: center;
}

.playerdirectory_postactivity_months_chart {
    height: 250px;
    width: 100%;
}


/* PRO CHARAKTER */
.playerdirectory_postactivity_perChara {
    text-align: center;
    margin: 10px 10px;
    display: flex;
    justify-content: space-around;
    align-content: flex-start;
    flex-wrap: nowrap;
}

.playerdirectory_postactivity_perChara_stat {
    width: 50%;
    text-align: center;
}

.playerdirectory_postactivity_perChara_headline {
    margin-bottom: 5px;
    color: #333;
    font-size: small;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
}

.playerdirectory_postactivity_perChara_bit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    height: 150px;
    align-items: center;
}

.playerdirectory_postactivity_perChara_bit_chara {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-flow: column;
}

.playerdirectory_postactivity_perChara_bit_charactername {
    color: #293340;
    font-weight: bold;
    text-transform: uppercase;
}

.playerdirectory_postactivity_perChara_chart {
    height: 150px;
    width: 100%;
}

/* EIGENE STATISTIKEN */
.playerdirectory_playerstat_ownstat_headline {
    margin-bottom: 5px;
    color: #333;
    font-size: small;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
}

.playerdirectory_playerstat_ownstat_bit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.playerdirectory_playerstat_ownstat_bit_option {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-flow: column;
}

.playerdirectory_playerstat_ownstat_bit_optionname {
    color: #293340;
    font-weight: bold;
    text-transform: uppercase;
}

.playerdirectory_playerstat_ownstat_chart {
    height: 150px;
    width: 100%;
}