#accountswitcher_header {
    position: relative;
    cursor: pointer;
	display: inline-block;
}
 
#accountswitcher_header_popup {
   padding: 0 30px 0 15px;
   position: absolute;
   top:0;
   display: none;
   opacity: 1;
	z-index: 99;
}

#accountswitcher_header_popup ul {
    border: solid 1px var(--hglighter);
    
   position: absolute;
   left: 0;
   padding-left: 10px;
   padding-right: 20px;
   min-width: 200px;
   margin-top: 15px;
   line-height: 120%;
   white-space: pre-line;
	text-align: left !important;
	text-transform: none;
}

/*
[id*="profile_switch_"] > img {
    height: 32px;
    width: auto;
} */

[id*="profile_link_"] {
    list-style-type: none;
}

[id*="profile_link_"] > a > img {
    height: 32px;
    width: auto;
}

.acclist_outer {
    text-align: center;
    float: left;
    border: 1px solid;
    border-color: #000;
    width: 100%;
}

.acclist_att {
    padding-left: 20px;
}

.acclist_att > img {
    height: 44px;
    width: auto;
}

.acclist_mast {
    padding-left: 30px;
}

.acclist_mast > img {
    height: 44px;
    width: auto;
}

.acclist_card_mast {
    float:left;
    width: 100%;
    padding-right: 0;
    border-bottom: 1px solid #000;
}

.acclist_card_mast > img {
    height: 44px;
    width: auto;
}

.acclist_card_att {
    float:left;
    width: 250px;
    text-align: center;
}

.acclist_card_hidden {
    text-align: center;
    padding-top: 30px;
    float: left;
    width: 250px;
    border: none;
}

.acclist_card_att > img {
    height: 100px;
    width: auto;
}

.profile_card_mast {
    padding: 5px;
    background: none;
    border: none;
}

.profile_card_att {
    padding: 5px;
    background: none;
    border: none;
}

.as_head_drop {
    list-style-type: none;
    white-space: nowrap;
	font-size: 10px;
}

.as_head_drop > img {
    height: 22px;
    width: auto;
}

.as_head_userbit {
    list-style: none;
}

.as_head_userbit > img {
    height: 22px;
    width: auto;
}

.as_header {
    border-top: 1px solid;
    margin-top: 7px!important;
    padding-top: 7px!important;
    clear: both;
    min-width: 400px;
}

.as_header > img {
    height: 22px;
    width: auto;
}

.as_header > li > img {
    height: 22px;
    width: auto;
}

.as_side_user {
    list-style-type: none;
    white-space: nowrap;
    height: 24px;
}

.as_menu-arrow {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.2);
    width: 10px;
    height: 100%;
    border: 5px solid transparent;
    -webkit-transition: opacity .4s ease .4s;
    -moz-transition: opacity .4s ease .4s;
    -ms-transition: opacity .4s ease .4s;
    -o-transition: opacity .4s ease .4s;
    transition: opacity .4s ease .4s;
}

.as_sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    background-color: var(--farbe2);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.as_sidenav a {
    padding: 8px 8px 8px 20px;
    text-decoration: none;
    font-size: 15px;
    color: #ccc;
    display: inline-block;
    transition: 0.3s;
}

.as_sidenav a:hover {
    color: #f1f1f1;
}

.as_sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

 .as_sidenav ul {
    margin-top: 40px;
}

 .as_sidenav ul li {
    display: inline-block;
    width: 100%;
    list-style: none;
    font-size: 15px;
    text-align: left;
    padding: 3px 0px;
}

 .as_sidenav ul li img {
    height: 22px;
    width: auto;
}

 .as_sidenav ul li:before {
    content: "";
    margin-right: 5px;
    color: rgba(255, 255, 255, 0.2);
}

@media screen and (max-height: 450px) {
  .as_sidenav {padding-top: 15px;}
  .as_sidenav a {font-size: 15px;}
}




/* =========================================================
   ACCOUNTSWITCHER IN DER FESTEN SIDEBAR
   Ursprüngliche Plugin-Struktur bleibt erhalten
   ========================================================= */

/* Alter Inline-Wrapper */
.fire-sidebar .welcb {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0;
	font-size: 0 !important;
}


/* =========================================================
   GRUNDELEMENT
   ========================================================= */

#accountswitcher_header {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0;
	overflow: visible;
	cursor: pointer;
}


/* =========================================================
   ICON IN DER SIDEBAR
   Der vorhandene Linktext wird visuell durch ein Icon ersetzt
   ========================================================= */

#accountswitcher_header > a {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;
	width: 100%;
	height: 48px;
	min-height: 48px;
	margin: 0;
	padding: 0;

	overflow: hidden;

	color: transparent !important;
	font-size: 0 !important;
	line-height: 1;
	text-decoration: none;

	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--fire-border-soft);

	cursor: pointer;

	transition:
		background-color 0.18s ease,
		color 0.18s ease;
}

/* Rechte Akzentlinie wie bei den übrigen Navigationselementen */
#accountswitcher_header > a::after {
	position: absolute;
	top: 50%;
	right: 0;

	width: 2px;
	height: 0;

	content: "";

	background: var(--fire-accent-light);
	transform: translateY(-50%);

	transition: height 0.18s ease;
}

#accountswitcher_header:hover > a {
	background: rgba(165, 195, 200, 0.055);
}

#accountswitcher_header:hover > a::before {
	color: #ffffff;

	transform: translateY(-1px);

	text-shadow:
		0 0 12px rgba(165, 195, 200, 0.35);
}

#accountswitcher_header:hover > a::after {
	height: 23px;
}


/* =========================================================
   TOOLTIP AUS DEM VORHANDENEN LINKTEXT
   ========================================================= */

#accountswitcher_header > a span {
	display: none;
}

/*
	Da das ursprüngliche HTML keinen eigenen Tooltip enthält,
	wird einer über ein Pseudoelement erzeugt.
*/

#accountswitcher_header::after {
	position: absolute;
	z-index: 10002;
	top: 50%;
	left: calc(100% + 12px);

	box-sizing: border-box;
	width: max-content;
	max-width: 210px;
	padding: 8px 11px;

	content: "Zweitcharaktere";

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	color: #d0d9d8;
	font-family: var(--fire-body);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;

	background: rgba(7, 11, 12, 0.985);
	border: 1px solid var(--fire-border);
	border-left: 2px solid var(--fire-accent);

	box-shadow:
		10px 13px 30px rgba(0, 0, 0, 0.42);

	transform: translate(-6px, -50%);

	transition:
		visibility 0s linear 0.15s,
		opacity 0.15s ease,
		transform 0.15s ease;
}

#accountswitcher_header:hover::after {
	visibility: visible;
	opacity: 1;

	transform: translate(0, -50%);

	transition-delay: 0s;
}

/* Tooltip ausblenden, sobald das Popup per Script geöffnet wurde */
#accountswitcher_header:has(
	#accountswitcher_header_popup[style*="display: block"]
)::after {
	visibility: hidden;
	opacity: 0;
}


/* =========================================================
   POPUP RECHTS NEBEN DER SIDEBAR
   ========================================================= */

#accountswitcher_header_popup {
	position: absolute !important;
	z-index: 10001 !important;

	top: 0 !important;
	left: calc(100% + 1px) !important;
	right: auto !important;
	bottom: auto !important;

	display: none;
	box-sizing: border-box;

	width: 285px !important;
	height: auto !important;
	max-height: calc(100vh - 20px);

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;

	color: var(--fire-text);

	background:
		linear-gradient(
			145deg,
			rgba(13, 18, 19, 0.995),
			rgba(6, 9, 10, 0.995)
		);

	border: 1px solid var(--fire-border);
	border-left: 2px solid var(--fire-accent);

	box-shadow:
		18px 20px 50px rgba(0, 0, 0, 0.58);
}

/* Kleine optische Verbindung zur Sidebar */
#accountswitcher_header_popup::before {
	display: block;
	position: static;

	box-sizing: border-box;
	width: 100%;
	padding: 18px 20px 16px;

	content: "Zweitcharaktere";

	color: #e0e7e5;
	font-family: var(--fire-display);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.05;
	text-transform: none;

	background:
		linear-gradient(
			to bottom,
			rgba(102, 143, 153, 0.09),
			rgba(102, 143, 153, 0.02)
		);

	border-bottom: 1px solid var(--fire-border);
}


/* =========================================================
   ACCOUNTLISTE
   Wichtig: nicht absolut positionieren
   ========================================================= */

#accountswitcher_header_popup > ul {
	position: static !important;
	inset: auto !important;
	float: none !important;

	display: block !important;
	box-sizing: border-box;

	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	max-height: 340px;

	margin: 0 !important;
	padding: 8px !important;

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

	color: var(--fire-text-soft);
	font-family: var(--fire-body);
	font-size: 10px;
	line-height: 1.4;
	text-align: left !important;
	text-transform: none;
	white-space: normal;

	background: transparent !important;
	border: 0 !important;
	list-style: none;

	scrollbar-width: thin;
	scrollbar-color: var(--fire-accent-dark) transparent;
}

#accountswitcher_header_popup > ul::-webkit-scrollbar {
	width: 5px;
}

#accountswitcher_header_popup > ul::-webkit-scrollbar-track {
	background: transparent;
}

#accountswitcher_header_popup > ul::-webkit-scrollbar-thumb {
	background: var(--fire-accent-dark);
}


/* =========================================================
   EINZELNE LISTENEINTRÄGE
   Deckt die üblichen Plugin-Klassen und IDs ab
   ========================================================= */

#accountswitcher_header_popup [id*="profile_link_"],
#accountswitcher_header_popup .as_head_drop,
#accountswitcher_header_popup .as_head_userbit {
	position: static !important;
	inset: auto !important;
	float: none !important;
	clear: both !important;

	display: block !important;
	box-sizing: border-box;

	width: 100% !important;
	height: auto !important;
	min-height: 0;

	margin: 0 !important;
	padding: 0 !important;

	color: inherit;
	background: transparent !important;
	border: 0 !important;
	list-style: none;
}

#accountswitcher_header_popup
[id*="profile_link_"]
+ [id*="profile_link_"],
#accountswitcher_header_popup
.as_head_drop
+ .as_head_drop,
#accountswitcher_header_popup
.as_head_userbit
+ .as_head_userbit {
	border-top: 1px solid var(--fire-border-soft) !important;
}


/* =========================================================
   ACCOUNTLINKS
   ========================================================= */

#accountswitcher_header_popup li > a,
#accountswitcher_header_popup [id*="profile_link_"] > a,
#accountswitcher_header_popup .as_head_drop > a,
#accountswitcher_header_popup .as_head_userbit > a {
	position: relative !important;
	inset: auto !important;
	float: none !important;

	display: flex !important;
	align-items: center !important;
	gap: 11px;

	box-sizing: border-box;
	width: 100% !important;
	min-height: 48px;

	margin: 0 !important;
	padding: 7px 12px !important;

	overflow: hidden;

	color: var(--fire-text-soft) !important;
	font-family: var(--fire-body);
	font-size: 10px !important;
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	text-decoration: none !important;
	text-overflow: ellipsis;
	white-space: nowrap;

	background: transparent !important;
	border: 0 !important;

	transition:
		color 0.18s ease,
		background-color 0.18s ease,
		padding-left 0.18s ease;
}

#accountswitcher_header_popup li > a:hover,
#accountswitcher_header_popup [id*="profile_link_"] > a:hover,
#accountswitcher_header_popup .as_head_drop > a:hover,
#accountswitcher_header_popup .as_head_userbit > a:hover {
	padding-left: 15px !important;

	color: #ffffff !important;
	background: rgba(102, 143, 153, 0.11) !important;
}


/* =========================================================
   AVATARE
   ========================================================= */

#accountswitcher_header_popup li img,
#accountswitcher_header_popup [id*="profile_link_"] img,
#accountswitcher_header_popup .as_head_drop img,
#accountswitcher_header_popup .as_head_userbit img {
	position: static !important;
	float: none !important;

	flex: 0 0 34px;

	display: block !important;

	box-sizing: border-box;
	width: 34px !important;
	min-width: 34px !important;
	max-width: 34px !important;
	height: 34px !important;

	margin: 0 !important;
	padding: 0 !important;

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

	background: var(--fire-black-soft);
	border: 1px solid var(--fire-border);
	border-radius: 0;
}


/* Alte Tabellenfarben im Dropdown neutralisieren */
#accountswitcher_header_popup .trow1,
#accountswitcher_header_popup .trow2 {
	color: inherit !important;
	background: transparent !important;
}


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

@media (max-width: 800px) {

	.fire-sidebar .welcb,
	#accountswitcher_header,
	#accountswitcher_header > a {
		height: 45px;
		min-height: 45px;
	}

	#accountswitcher_header_popup {
		width: min(
			285px,
			calc(100vw - var(--fire-sidebar-width) - 12px)
		) !important;
	}
}

@media (max-width: 600px) {

	#accountswitcher_header_popup {
		position: fixed !important;

		top: 58px !important;
		left: calc(var(--fire-sidebar-width) + 1px) !important;

		width: calc(
			100vw - var(--fire-sidebar-width) - 12px
		) !important;
		max-width: 285px;
		max-height: calc(100vh - 70px);
	}

	#accountswitcher_header_popup::before {
		display: none;
	}
}

#accountswitcher_header > a {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 48px;

	padding: 0;

	color: var(--fire-accent);
	text-decoration: none;
	font-size: 13px;

	background: transparent;
	border-bottom: 1px solid var(--fire-border-soft);

	transition: .2s;
}

#accountswitcher_header > a i {
	font-size: 13px;
	color: var(--fire-accent);

	transition: .2s;
}

#accountswitcher_header:hover > a,
#accountswitcher_header:hover > a i {
	color: #fff;
	background: rgba(165,195,200,.06);
}

#accountswitcher_header:hover > a i {
	transform: translateY(-1px);
	text-shadow: 0 0 10px rgba(165,195,200,.35);
}

/* Einzelner Account als horizontale Zeile */
#accountswitcher_header_popup .as_head_drop {
	display: flex !important;
	align-items: center;
	gap: 12px;

	box-sizing: border-box;
	width: 100%;
	min-height: 52px;

	margin: 0;
	padding: 8px 12px;

	list-style: none;
	white-space: nowrap;

	background: transparent;
	border-bottom: 1px solid var(--fire-border-soft);
}

/* Letzten Trenner entfernen */
#accountswitcher_header_popup .as_head_drop:last-child {
	border-bottom: 0;
}

/* Avatar links */
#accountswitcher_header_popup .as_head_drop > img {
	flex: 0 0 34px;

	display: block;

	width: 34px !important;
	min-width: 34px;
	height: 34px !important;

	margin: 0 !important;

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

	background: var(--fire-black-soft);
	border: 1px solid var(--fire-border);
}

/* Link rechts neben dem Bild */
#accountswitcher_header_popup .as_head_drop > a {
	display: flex;
	align-items: center;
	flex: 1;

	min-width: 0;
	height: 34px;

	color: var(--fire-text-soft);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
}

/* Name */
#accountswitcher_header_popup .as_head_drop > a .noscript {
	display: block;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	color: inherit;
	font-size: inherit !important;
}

/* Hover über die gesamte Zeile */
#accountswitcher_header_popup .as_head_drop:hover {
	background: rgba(102, 143, 153, 0.11);
}

#accountswitcher_header_popup .as_head_drop:hover > a {
	color: #ffffff;
}