// ~ You're not allowed to copy or edit this code! The full copyright belongs lostis-world.net!! ~ //
// ~ Powered by www.lostis-world.net - All rights are reserved! ~ //
// ~ If you need help or if you have any questions about us this plugin, feel free to contact us in our support forum https://www.lostis-world.net ~ //

//#############################################//
//############### LoSti's World ###############//
//############### MemberList V1 ###############//
//#############################################//
@if #{$wcf_option_useronline_activate_v1} == 1 {
	body[id="tpl_wcf_usersOnlineList"] {
		@include screen-md-up {
			.containerList {
				.details.userInformation {
					> dl.inlineDataList {
						> dt {
							font-weight: bold;
							width: 100% !important;
						}
						> dd {
							width: 100% !important;
							text-align: left !important;
							margin-bottom: 10px !important;
						}
						> dd:not(:last-of-type):after {
							display: none;
						}
					}
				}
			}
		}
	}
	body[id="tpl_wcf_usersOnlineList"] {
		@include screen-md-up {
			.containerList.userList {
					display: flex;
					flex-wrap: wrap;
					width: calc(100% + 20px);
					margin-left: -10px;
					> li {
						display: flex;
						justify-content: center;
						padding: 10px;
						border-bottom: none;
						margin-top: 70px;
						min-width: 220px;
						background: transparent;
						box-shadow: none;
						border: none;
					}
				> li:hover {
					background: transparent;
					box-shadow: none;
					border: none;
				}
				.containerHeadline {
					margin-top: 80px;
					p {
						background: rgba(darken($wcfSidebarBackground, 15%), 1);
						text-align: center;
						font-size: 12px;
					}
					> h3 {
						display: flex;
						flex-direction: column;
						text-align: center;
						padding: 0;
						> .badge {
							min-width: 100%;
							max-width: 100%;
							padding: 4px 6px;
							border-radius: 0;
						}
						span.icon.icon16.fa-lock.jsUserBanned {
							margin-top: -24px;
							margin-bottom: 8px;
						}
						> a.username.userLink, a.username {
							background: rgba(darken($wcfSidebarBackground, 15%), 1);
							padding: 5px;
						}
					}
				}
				.box48 {
					position: relative;
					flex-direction: column;
					width: 100%;
					background: rgba($wcfSidebarBackground, 1);
					padding: 0;
					min-height: 400px;
					&::before {
						content: "";
						position: absolute;
						width: 100%;
						height: 140px;
						background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPElEQVQoU2NkIA5IMRKhToqBgeEZIYVgRSDD8CmEK8KnEEURLoUYirApxKoIXSFORcgK8SqCKSSoCKQQAJD/CSUFonnJAAAAAElFTkSuQmCC) repeat, rgba($wcfHeaderBackground, 1);
						border-bottom: 33px solid rgba($wcfHeaderMenuBackground, 1);
					}
					> :last-child {
						width: 100%;
					}
					> a {
						z-index: 1;
						margin-bottom: 0;
					}
					.userListItemBackground {
            position: absolute;
            background-size:cover;
            display:block;
            height:105px;
            width:100%;
           }
					.userAvatarImage {
						border: 5px solid rgba($wcfHeaderBackground, 1);
						background: rgba($wcfHeaderBackground, 1);
						height: 120px;
						width: auto;
						margin-top: -60px;
					}
					> :first-child:not(:last-child) {
						margin-right: 0;
						z-index: 1;
					}
				}
				.details.userInformation {
					.inlineList {
						margin-top: -2px;
						justify-content: center;
						> li {
							text-align: center;
							color: rgba($wcfSidebarText, 1);
							font-size: 11px;
							&:last-child {
								width: 100%;
							}
						}
					}
					> ul.inlineList.commaSeparated {
						position: absolute;
						bottom: 1px;
						right: 11px;
						left: 11px;
						padding: 5px 10px;
						border-top: 1px solid rgba(darken($wcfSidebarBackground, 10%), 1);
					}
					> dl.plain.inlineDataList.small {
						margin: 0 0 28px 0;
						padding: 20px 10px;
					}
					> dl.inlineDataList {
						> dt {
							width: 70%;
						}
						> dd {
							width: 28%;
							text-align: right;
						}
						> dd:not(:last-of-type):after {
							display: none;
						}
					}
				}
			}
			.containerList > li .buttonGroupNavigation {
				display: flex;
				width: 100%;
				justify-content: center;
				opacity: 1;
				right: 0;
				top: 110px;
				background: transparent;
				padding: 3px 5px;
				> ul {
					background: transparent;
					border: none;
					border-radius: 0;
					> li {
						padding: 0;
						> a {
							margin-top: -180px;
							margin-bottom: -10px;
							&:hover > .icon {
								color: rgba($wcfSidebarBackground, 1);
								text-shadow: none;
							}
							> .icon {
								color: rgba(darken($wcfHeaderMenuBackground, 15%), 1);
								text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
							}
						}
					}
				}
			}
		}
		.containerList.userList > li {
			@include screen-lg {
				flex: 25%;
				max-width: 25%;
			}
			@include screen-md {
				flex: 33.33%;
				max-width: 33.33%;
			}
		}
	}
}

@if #{$wcf_option_useronline_activate_v2} == 1 {
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList {
            .details.userInformation {
                > dl.inlineDataList {
                    > dt {
                        font-weight: bold;
                        width: 100% !important;
                    }
                    > dd {
                        width: 100% !important;
                        text-align: left !important;
                        margin-bottom: 10px !important;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
    }
}
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList.userList {
            display: flex;
            flex-wrap: wrap;
            width: calc(100% + 20px);
            margin-left: -10px;
            > li {
                display: flex;
                justify-content: flex-start;
                padding: 10px;
                border-bottom: none;
                margin-top: 10px;
                min-height: 300px;
                background: transparent;
                box-shadow: none;
                border: none;
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 10px;
                    width: 68px;
                    height: 100%;
                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAAN0lEQVQoU2P8//+/LyMj42YGBgYGXGxG+isyZmRkPAt1E1Y2yE3UUyTFyMj4DGodVjbIOuooAgBGaXgLQ0R8KQAAAABJRU5ErkJggg==) top left repeat-x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAARElEQVQoU2P8//+/FCMj4zMGBgYGXGxG6ikCWYMN/P//35iRkfEsSA5kHZyDi02xIl9GRsbNMOvgnP///2Nlg6yjjiIAd6FwC4q4dNIAAAAASUVORK5CYII=) bottom left repeat-x, rgba($wcfHeaderBackground, 1);
                    -webkit-box-shadow: 10px 0px 5px -8px rgba(0,0,0,0.25);
                    -moz-box-shadow: 10px 0px 5px -8px rgba(0,0,0,0.25);
                    box-shadow: 10px 0px 5px -8px rgba(0,0,0,0.25);
                }
            }
            > li:hover {
                background: transparent;
                background: transparent;
                box-shadow: none;
                border: none;
            }
            > li .buttonGroupNavigation {
                display: flex;
                align-items: flex-end;
                width: 68px;
                height: 100%;
                justify-content: center;
                opacity: 1;
                left: 10px;
                top: 0;
                padding-bottom: 10px; 
                background: transparent;
                > ul {
                    display: block;
                    background: transparent;
                    border: none;
                    border-radius: 0;
                    > li {
                        padding: 0;
                        &:not(:last-child) {
                            border-right: 0;
                        }
                        > a {
                            margin-top: 0;
                            &:hover > .icon {
                                color: rgba($wcfSidebarBackground, 1);
                                text-shadow: none;
                            }
                            > .icon {
                                color: rgba(darken($wcfHeaderBackground, 15%), 1);
                                text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
                            }
                        }
                    }
                }
            }
            .box48 {
                width: 100%;
                background: rgba($wcfSidebarBackground, 1);
                border: 1px solid rgba(darken($wcfSidebarBackground, 5%), 1);
                padding: 0;
                align-items: flex-start;
                border-radius: 0 3px 3px 0;
                > :last-child {
                    width: 100%;
                }
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 78px;
                    border-style: solid;
                    border-width: 10px 0 0 10px;
                    border-color: transparent transparent transparent rgba(darken($wcfHeaderBackground, 15%), 1);
                }
                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 78px;
                    border-style: solid;
                    border-width: 10px 10px 0 0;
                    border-color: rgba(darken($wcfHeaderBackground, 15%), 1) transparent transparent transparent;
                }
                > a {
                    z-index: 1;
                }
                .userAvatarImage {
                    border: 5px solid $wcfHeaderBackground;
                    background: $wcfHeaderBackground;
                    height: 80px;
                    width: auto;
                    margin-right: 5px;
                    margin-top: 10px;
                    margin-left: -7px;
                }
                > :first-child:not(:last-child) {
                    margin-right: 0;
                    z-index: 1;
                }
            }
            .containerHeadline {
                width: calc(100% - 20px);
                margin: 10px auto 0 auto;
                p {
                    background: rgba(darken($wcfSidebarBackground, 15%), 1);
                    text-align: center;
                    font-size: 12px;
                }
                > h3 {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    justify-content: center;
                    padding: 0;
                    > .badge {
                        max-width: 100%;
                        min-width: 100%;
                        padding: 4px 6px;
                        border-radius: 0;
                    }
                    span.icon.icon16.fa-lock.jsUserBanned {
                        margin-top: -24px;
                        margin-bottom: 8px;
                    }
                    > a.username.userLink, a.username {
                        width: 100%;
                        padding: 5px;
                        background: rgba(darken($wcfSidebarBackground, 10%), 1);
                    }
                }
            }
        }
        .details.userInformation {
            .inlineList {
                margin-top: -2px;
                justify-content: center;
                > li {
                    text-align: center;
                    color: rgba($wcfHeaderBackground, 1);
                    font-size: 11px;
                    &:last-child {
                        width: 100%;
                    }
                }
            }
            > ul.inlineList.commaSeparated {
                position: absolute;
                bottom: 11px;
                right: 21px;
                left: 100px;
                padding: 5px 10px;
                border-top: 1px solid rgba(darken($wcfSidebarBackground, 10%), 1);
            }
            > dl.plain.inlineDataList.small {
                margin: 0 0 28px 0;
                padding: 20px 10px;
            }
            > dl.inlineDataList {
                > dt {
                    width: 70%;
                }
                > dd {
                    width: 28%;
                    text-align: right;
                }
                > dd:not(:last-of-type):after {
                    display: none;
                }
            }
        }
    }
    .containerList.userList > li {
        @include screen-lg {
            flex: 33.33%;
            min-width: 33.33%;
            max-width: 33.33%;
        }
        @include screen-md {
            flex: 50%;
            min-width: 50%;
            max-width: 50%;
        }
    }
}
}

@if #{$wcf_option_useronline_activate_v3} == 1 {
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList {
            .details.userInformation {
                > dl.inlineDataList {
                    > dt {
                        font-weight: bold;
                        width: 100% !important;
                    }
                    > dd {
                        width: 100% !important;
                        text-align: left !important;
                        margin-bottom: 10px !important;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
    }
}
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList.userList {
                display: flex;
                flex-wrap: wrap;
                width: calc(100% + 20px);
                margin-left: -10px;
                > li {
                    display: flex;
                    justify-content: center;
                    padding: 10px;
                    border-bottom: none;
                    min-width: 240px;
                    background: transparent;
                    box-shadow: none;
                    border: none;
                }
                .box48:hover .userAvatarImage {
                    -webkit-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    transform: rotate(360deg);
                    -webkit-transition: 1s ease;
                    -o-transition: 1s ease;
                    transition: 1s ease;
                }
            > li:hover {
                background: transparent;
                box-shadow: none;
                border: none;
            }
            .containerHeadline {
                position: absolute;
                top: 10px;
                left: -5px;
                z-index: 2;
                width: calc(100% + 10px);
                -webkit-box-shadow: 0px 10px 5px -5px rgba(0,0,0,0.25);
                -moz-box-shadow: 0px 10px 5px -5px rgba(0,0,0,0.25);
                box-shadow: 0px 10px 5px -5px rgba(0,0,0,0.25);
                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: -5px;
                    border-style: solid;
                    border-width: 0 5px 5px 0;
                    border-color: transparent black transparent transparent;
                }
                &::after {
                    content: "";
                    position: absolute;
                    right: 0;
                    bottom: -5px;
                    border-style: solid;
                    border-width: 5px 5px 0 0;
                    border-color: black transparent transparent transparent;
                }
                p {
                    background: rgba(darken($wcfSidebarBackground, 15%), 1);
                    text-align: center;
                    font-size: 12px;
                }
                > h3 {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    padding: 0;
                    > .badge {
                        max-width: 100%;
                        min-width: 100%;
                        padding: 4px 6px;
                        border-radius: 0;
                        top: 0;
                    }
                    span.icon.icon16.fa-lock.jsUserBanned {
                        margin-top: -24px;
                        margin-bottom: 8px;
                    }
                    > a.username.userLink, a.username {
                        background: rgba(darken($wcfSidebarBackground, 15%), 1);
                        border-top: 1px solid lighten($wcfSidebarBackground, 5%);
                        padding: 5px;
                    }
                }
            }
            > li .box48 {
                position: relative;
                flex-direction: column;
                width: 100%;
                background: rgba($wcfSidebarBackground, 1);
                padding: 0;
                min-height: 400px;
                &::before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 163px;
                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPElEQVQoU2NkIA5IMRKhToqBgeEZIYVgRSDD8CmEK8KnEEURLoUYirApxKoIXSFORcgK8SqCKSSoCKQQAJD/CSUFonnJAAAAAElFTkSuQmCC) repeat, rgba($wcfHeaderBackground, 1);
                    border-bottom: 33px solid $wcfHeaderMenuBackground;
                }
                > :last-child {
                    width: 100%;
                }
                > a {
                    z-index: 1;
                    margin-top: 0;
                    margin-bottom: -10px;
                }
                .userAvatarImage {
                    border: 5px solid $wcfHeaderMenuBackground;
                    background: rgba($wcfHeaderMenuBackground, 1);
                    height: 100px;
                    margin-top: 100px;
                    width: auto;
                    -webkit-transition: 1s ease;
                    -o-transition: 1s ease;
                    -moz-transition: 1s ease;
                    transition: 1s ease;
                }
                > :first-child:not(:last-child) {
                    margin-right: 50%;
                    z-index: 1;
                }
            }
            .details.userInformation {
                margin-top: 20px;
                .inlineList {
                    margin-top: -2px;
                    justify-content: center;
                    > li {
                        text-align: center;
                        color: rgba($wcfSidebarText, 1);
                        font-size: 11px;
                        &:last-child {
                            width: 100%;
                        }
                    }
                }
                > ul.inlineList.commaSeparated {
                    position: absolute;
                    bottom: 1px;
                    right: 11px;
                    left: 11px;
                    padding: 5px 10px;
                    border-top: 1px solid rgba(darken($wcfSidebarBackground, 10%), 1);
                }
                > dl.plain.inlineDataList.small {
                    margin: 0 0 28px 0;
                    padding: 20px 10px;
                }
                > dl.inlineDataList {
                    > dt {
                        width: 70%;
                    }
                    > dd {
                        width: 28%;
                        text-align: right;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
        .containerList > li .buttonGroupNavigation {
            display: flex;
            width: 100%;
            justify-content: flex-end;
            opacity: 1;
            right: 0;
            top: 130px;
            background: transparent;
            padding: 3px 7px;
            > ul {
                background: transparent;
                border: none;
                border-radius: 0;
                > li {
                    padding: 0;
                    &:not(:last-child) {
                        border-right: 0;
                    }
                    > a {
                        margin-top: 0;
                        padding: 3px;
                        &:hover > .icon {
                            color: rgba($wcfSidebarBackground, 1);
                            text-shadow: none;
                        }
                        > .icon {
                            color: rgba(darken($wcfHeaderMenuBackground, 15%), 1);
                            text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
                        }
                    }
                }
            }
        }
    }
    .containerList.userList > li {
        @include screen-lg {
            flex: 25%;
            max-width: 25%;
        }
        @include screen-md {
            flex: 33.33%;
            max-width: 33.33%;
        }
    }
}
}

@if #{$wcf_option_useronline_activate_v4} == 1 {
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList {
            .details.userInformation {
                > dl.inlineDataList {
                    > dt {
                        font-weight: bold;
                        width: 100% !important;
                    }
                    > dd {
                        width: 100% !important;
                        text-align: left !important;
                        margin-bottom: 10px !important;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
    }
}
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList.userList {
                display: flex;
                flex-wrap: wrap;
                width: calc(100% + 20px);
                margin-left: -10px;
                > li {
                    display: flex;
                    justify-content: center;
                    padding: 10px;
                    border-bottom: none;
                    min-width: 220px;
                    background: transparent;
                    box-shadow: none;
                    border: none;
                }
            > li:hover {
                background: transparent;
                box-shadow: none;
                border: none;
            }
            .containerHeadline {
                z-index: 1;
                width: 100%;
                margin: 10px auto 0 auto;
                padding: 0 10px;
                p {
                    background: transparent;
                    text-align: center;
                    font-size: 12px;
                }
                > h3 {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    padding: 0;
                    > .badge {
                        margin: 0 auto;
                        padding: 4px 6px;
                        border-radius: 0;
                    }
                    span.icon.icon16.fa-lock.jsUserBanned {
                        margin-top: -24px;
                        margin-bottom: 8px;
                    }
                    > a.username.userLink, a.username {
                        background: transparent;
                        padding: 5px;
                    }
                }
            }
            .box48 {
                position: relative;
                flex-direction: column;
                width: 100%;
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPElEQVQoU2NkIA5IMRKhToqBgeEZIYVgRSDD8CmEK8KnEEURLoUYirApxKoIXSFORcgK8SqCKSSoCKQQAJD/CSUFonnJAAAAAElFTkSuQmCC) repeat, rgba($wcfSidebarBackground, 1);
                padding: 0;
                min-height: 450px;
                &::before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 115px;
                    background: rgba($wcfHeaderBackground, 1);
                    border-top: 33px solid rgba($wcfHeaderMenuBackground, 1);
                }
                > :last-child {
                    width: 100%;
                }
                > a {
                    z-index: 1;
                    margin-bottom: 0;
                }
                .userListItemBackground {
            position: absolute;
            background-size:cover;
            display:block;
            height:115px;
            width:100%;
           }
                .userAvatarImage {
                    border: 5px solid rgba($wcfHeaderBackground, 1);
                    background: rgba($wcfHeaderBackground, 1);
                    height: 140px;
                    width: auto;
                    margin-top: 40px;
                }
                > :first-child:not(:last-child) {
                    margin-right: 0;
                    z-index: 1;
                }
            }
            .details.userInformation {
                .inlineList {
                    margin-top: -2px;
                    justify-content: center;
                    > li {
                        text-align: center;
                        color: rgba($wcfSidebarBackground, 1);
                        font-size: 11px;
                        &:last-child {
                            width: 100%;
                        }
                    }
                }
                > ul.inlineList.commaSeparated {
                    position: absolute;
                    bottom: 1px;
                    right: 0;
                    left: 0;
                    padding: 5px 10px;
                    background: rgba($wcfHeaderMenuBackground, 1);
                }
                > dl.plain.inlineDataList.small {
                    margin: 0 0 28px 0;
                    padding: 20px 10px;
                }
                > dl.inlineDataList {
                    > dt {
                        width: 70%;
                    }
                    > dd {
                        width: 28%;
                        text-align: right;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
        .containerList > li .buttonGroupNavigation {
            display: flex;
            width: 100%;
            justify-content: center;
            opacity: 1;
            right: 0;
            top: 3px;
            background: transparent;
            padding: 3px 5px 13px 3px;
            z-index: 1;
            > ul {
                background: transparent;
                border: none;
                border-radius: 0;
                > li {
                    padding: 0;
                    > a {
                        margin-top: -180px;
                        margin-bottom: -10px;
                        &:hover > .icon {
                            color: rgba($wcfSidebarBackground, 1);
                            text-shadow: none;
                        }
                        > .icon {
                            color: rgba(darken($wcfHeaderMenuBackground, 15%), 1);
                            text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
                        }
                    }
                }
            }
        }
    }
    .containerList.userList > li {
        @include screen-lg {
            flex: 25%;
            max-width: 25%;
        }
        @include screen-md {
            flex: 33.33%;
            max-width: 33.33%;
        }
    }
}
}

//#############################################//
//############### LoSti's World ###############//
//############### MemberList V2 ###############//
//#############################################//
@if #{$wcf_option_memberlist_activate_v1} == 1 {
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList {
            .details.userInformation {
                > dl.inlineDataList {
                    > dt {
                        font-weight: bold;
                        width: 100% !important;
                    }
                    > dd {
                        width: 100% !important;
                        text-align: left !important;
                        margin-bottom: 10px !important;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
    }
}
body[id="tpl_wcf_membersList"] {
    @include screen-md-up {
        .containerList.userList {
                display: flex;
                flex-wrap: wrap;
                width: calc(100% + 20px);
                margin-left: -10px;
                > li {
                    display: flex;
                    justify-content: center;
                    padding: 10px;
                    border-bottom: none;
                    margin-top: 70px;
                    min-width: 220px;
                    background: transparent;
                    box-shadow: none;
                    border: none;
                }
            > li:hover {
                background: transparent;
                box-shadow: none;
                border: none;
            }
            .containerHeadline {
                margin-top: 80px;
                p {
                    background: rgba(darken($wcfSidebarBackground, 15%), 1);
                    text-align: center;
                    font-size: 12px;
                }
                > h3 {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    padding: 0;
                    > .badge {
                        min-width: 100%;
                        max-width: 100%;
                        padding: 4px 6px;
                        border-radius: 0;
                    }
                    span.icon.icon16.fa-lock.jsUserBanned {
                        margin-top: -24px;
                        margin-bottom: 8px;
                    }
                    > a.username.userLink, a.username {
                        background: rgba(darken($wcfSidebarBackground, 15%), 1);
                        padding: 5px;
                    }
                }
            }
            .box48 {
                position: relative;
                flex-direction: column;
                width: 100%;
                background: rgba($wcfSidebarBackground, 1);
                padding: 0;
                min-height: 400px;
                &::before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 140px;
                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPElEQVQoU2NkIA5IMRKhToqBgeEZIYVgRSDD8CmEK8KnEEURLoUYirApxKoIXSFORcgK8SqCKSSoCKQQAJD/CSUFonnJAAAAAElFTkSuQmCC) repeat, rgba($wcfHeaderBackground, 1);
                    border-bottom: 33px solid rgba($wcfHeaderMenuBackground, 1);
                }
                > :last-child {
                    width: 100%;
                }
                > a {
                    z-index: 1;
                    margin-bottom: 0;
                }
                .userListItemBackground {
                position: absolute;
                background-size:cover;
                display:block;
                height:105px;
                width:100%;
                }
                .userAvatarImage {
                    border: 5px solid rgba($wcfHeaderBackground, 1);
                    background: rgba($wcfHeaderBackground, 1);
                    height: 120px;
                    width: auto;
                    margin-top: -60px;
                }
                > :first-child:not(:last-child) {
                    margin-right: 0;
                    z-index: 1;
                }
            }
            .details.userInformation {
                .inlineList {
                    margin-top: -2px;
                    justify-content: center;
                    > li {
                        text-align: center;
                        color: rgba($wcfSidebarText, 1);
                        font-size: 11px;
                        &:last-child {
                            width: 100%;
                        }
                    }
                }
                > ul.inlineList.commaSeparated {
                    position: absolute;
                    bottom: 1px;
                    right: 11px;
                    left: 11px;
                    padding: 5px 10px;
                    border-top: 1px solid rgba(darken($wcfSidebarBackground, 10%), 1);
                }
                > dl.plain.inlineDataList.small {
                    margin: 0 0 28px 0;
                    padding: 20px 10px;
                }
                > dl.inlineDataList {
                    > dt {
                        width: 70%;
                    }
                    > dd {
                        width: 28%;
                        text-align: right;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
        .containerList > li .buttonGroupNavigation {
            display: flex;
            width: 100%;
            justify-content: center;
            opacity: 1;
            right: 0;
            top: 110px;
            background: transparent;
            padding: 3px 5px;
            > ul {
                background: transparent;
                border: none;
                border-radius: 0;
                > li {
                    padding: 0;
                    > a {
                        margin-top: -180px;
                        margin-bottom: -10px;
                        &:hover > .icon {
                            color: rgba($wcfSidebarBackground, 1);
                            text-shadow: none;
                        }
                        > .icon {
                            color: rgba(darken($wcfHeaderMenuBackground, 15%), 1);
                            text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
                        }
                    }
                }
            }
        }
    }
    .containerList.userList > li {
        @include screen-lg {
            flex: 25%;
            max-width: 25%;
        }
        @include screen-md {
            flex: 33.33%;
            max-width: 33.33%;
        }
    }
}
}

@if #{$wcf_option_memberlist_activate_v2} == 1 {
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList {
            .details.userInformation {
                > dl.inlineDataList {
                    > dt {
                        font-weight: bold;
                        width: 100% !important;
                    }
                    > dd {
                        width: 100% !important;
                        text-align: left !important;
                        margin-bottom: 10px !important;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
    }
}
body[id="tpl_wcf_membersList"] {
	@include screen-md-up {
		.containerList.userList {
			display: flex;
			flex-wrap: wrap;
			width: calc(100% + 20px);
			margin-left: -10px;
			> li {
				display: flex;
				justify-content: flex-start;
				padding: 10px;
				border-bottom: none;
				margin-top: 10px;
				min-height: 420px;
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 10px;
					width: 68px;
					height: 100%;
					background: rgba($wcfHeaderBackground, 1);
					-webkit-box-shadow: 10px 0px 5px -8px rgba(0,0,0,0.25);
					-moz-box-shadow: 10px 0px 5px -8px rgba(0,0,0,0.25);
					box-shadow: 10px 0px 5px -8px rgba(0,0,0,0.25);
				}
			}
			> li:hover {
				background-color: transparent;
			}
			> li .buttonGroupNavigation {
				display: flex;
				align-items: flex-end;
				width: 68px;
				height: 100%;
				justify-content: center;
				opacity: 1;
				left: 10px;
				top: 0;
				padding-bottom: 10px; 
				background: rgba($wcfHeaderBackground, 1);
				> ul {
					display: block;
					background-color: transparent;
					border: none;
					border-radius: 0;
					> li {
						padding: 0;
						&:not(:last-child) {
							border-right: 0;
						}
						> a {
							margin-top: 0;
							&:hover > .icon {
								color: rgba($wcfSidebarBackground, 1);
								text-shadow: none;
							}
							> .icon {
								color: rgba(darken($wcfHeaderBackground, 15%), 1);
								text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
							}
						}
					}
				}
			}
			.box48 {
				width: 100%;
				background: rgba($wcfSidebarBackground, 1);
				border: 1px solid rgba(darken($wcfSidebarBackground, 5%), 1);
				padding: 0;
				align-items: flex-start;
				border-radius: 0 3px 3px 0;
				min-height:370px;
				> :last-child {
					width: 100%;
				}
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 78px;
					border-style: solid;
					border-width: 10px 0 0 10px;
					border-color: transparent transparent transparent rgba(darken($wcfHeaderBackground, 15%), 1);
				}
				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 78px;
					border-style: solid;
					border-width: 10px 10px 0 0;
					border-color: rgba(darken($wcfHeaderBackground, 15%), 1) transparent transparent transparent;
				}
				> a {
					z-index: 1;
				}
				.userListItemBackground {
         position: absolute;
         background-size:cover;
         display:block;
         height:90px;
         width:95%;
        }
				.userAvatarImage {
					border: 5px solid $wcfHeaderBackground;
					background-color: $wcfHeaderBackground;
					height: 80px;
					width: auto;
					margin-right: 5px;
					margin-top: 10px;
					margin-left: -7px;
				}
				> :first-child:not(:last-child) {
					margin-right: 0;
				}
			}
			.containerHeadline {
				width: calc(100% - 20px);
				margin: 10px auto 0 auto;
				margin-top:60px;
				p {
					background-color: rgba(darken($wcfSidebarBackground, 15%), 1);
					text-align: center;
					font-size: 12px;
				}
				> h3 {
					display: flex;
					flex-direction: column;
					text-align: center;
					justify-content: center;
					padding: 0;
					> .badge {
						max-width: 100%;
						padding: 4px 6px;
						border-radius: 0;
					}
					span.icon.icon16.fa-lock.jsUserBanned {
						margin-top: -24px;
    					margin-bottom: 8px;
					}
					> a.username.userLink, a.username {
						width: 100%;
						padding: 5px;
						background: rgba(darken($wcfSidebarBackground, 10%), 0.3);
					}
				}
			}
		}
		.details.userInformation {
			.inlineList {
				margin-top: -2px;
				> li {
                       text-align: center;
                       background-color:rgba($wcfContentBackground, .3);
                       border: 1px solid rgba($wcfContentHeadlineBorder, .1);
                       width: 100%;
                    }
                    > p {
                       text-align: center;
                       background-color:rgba($wcfContentBackground, .3);
                       border: 1px solid rgba($wcfContentHeadlineBorder, .1);
                       width: 100%;
                    }
			}
			> ul.inlineList.commaSeparated {
				position: absolute;
				bottom: 11px;
				right: 10px;
				left:80px;
				//padding: 0 10px;\\
				//border-top: 1px solid rgba(darken($wcfSidebarBackground, 10%), 1);\\
				li:not(:last-child) {
					display: inline;
                        color: rgba($wcfSidebarDimmedLink, 1);
				}
			}
			.inlineList.commaSeparated > li:not(:last-child)::after {
    content: "";
    padding-left: 1px;
}
.inlineList > li:not(:last-child) {
    margin-right: 0px;
}
			> dl.plain.inlineDataList.small {
				margin: 0 0 28px 0;
				padding: 20px 10px;
			}
			> dl.inlineDataList {
				> dt {
					width: 70%;
				}
				> dd {
					width: 28%;
    				text-align: right;
				}
				> dd:not(:last-of-type):after {
					display: none;
				}
			}
		}
	}
	.containerList.userList > li {
		@include screen-lg {
			flex: 33.33%;
			min-width: 33.33%;
			max-width: 33.33%;
		}
		@include screen-md {
			flex: 50%;
			min-width: 50%;
			max-width: 50%;
		}
	}
}
}

@if #{$wcf_option_memberlist_activate_v3} == 1 {
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList {
            .details.userInformation {
                > dl.inlineDataList {
                    > dt {
                        font-weight: bold;
                        width: 100% !important;
                    }
                    > dd {
                        width: 100% !important;
                        text-align: left !important;
                        margin-bottom: 10px !important;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
    }
}
body[id="tpl_wcf_membersList"] {
    @include screen-md-up {
        .containerList.userList {
                display: flex;
                flex-wrap: wrap;
                width: calc(100% + 20px);
                margin-left: -10px;
                > li {
                    display: flex;
                    justify-content: center;
                    padding: 10px;
                    border-bottom: none;
                    min-width: 240px;
                    background: transparent;
                    box-shadow: none;
                    border: none;
                }
                .box48:hover .userAvatarImage {
                    -webkit-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    transform: rotate(360deg);
                    -webkit-transition: 1s ease;
                    -o-transition: 1s ease;
                    transition: 1s ease;
                }
            > li:hover {
                background: transparent;
                box-shadow: none;
                border: none;
            }
            .containerHeadline {
                position: absolute;
                top: 10px;
                left: -5px;
                z-index: 2;
                width: calc(100% + 10px);
                -webkit-box-shadow: 0px 10px 5px -5px rgba(0,0,0,0.25);
                -moz-box-shadow: 0px 10px 5px -5px rgba(0,0,0,0.25);
                box-shadow: 0px 10px 5px -5px rgba(0,0,0,0.25);
                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: -5px;
                    border-style: solid;
                    border-width: 0 5px 5px 0;
                    border-color: transparent black transparent transparent;
                }
                &::after {
                    content: "";
                    position: absolute;
                    right: 0;
                    bottom: -5px;
                    border-style: solid;
                    border-width: 5px 5px 0 0;
                    border-color: black transparent transparent transparent;
                }
                p {
                    background: rgba(darken($wcfSidebarBackground, 15%), 1);
                    text-align: center;
                    font-size: 12px;
                }
                > h3 {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    padding: 0;
                    > .badge {
                        max-width: 100%;
                        min-width: 100%;
                        padding: 4px 6px;
                        border-radius: 0;
                        top: 0;
                    }
                    span.icon.icon16.fa-lock.jsUserBanned {
                        margin-top: -24px;
                        margin-bottom: 8px;
                    }
                    > a.username.userLink, a.username {
                        background: rgba(darken($wcfSidebarBackground, 15%), 1);
                        border-top: 1px solid lighten($wcfSidebarBackground, 5%);
                        padding: 5px;
                    }
                }
            }
            > li .box48 {
                position: relative;
                flex-direction: column;
                width: 100%;
                background: rgba($wcfSidebarBackground, 1);
                padding: 0;
                min-height: 400px;
                &::before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 163px;
                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPElEQVQoU2NkIA5IMRKhToqBgeEZIYVgRSDD8CmEK8KnEEURLoUYirApxKoIXSFORcgK8SqCKSSoCKQQAJD/CSUFonnJAAAAAElFTkSuQmCC) repeat, rgba($wcfHeaderBackground, 1);
                    border-bottom: 33px solid $wcfHeaderMenuBackground;
                }
                > :last-child {
                    width: 100%;
                }
                > a {
                    z-index: 1;
                    margin-top: 0;
                    margin-bottom: -10px;
                }
                .userListItemBackground {
                position: absolute;
                background-size:cover;
                display:block;
                height: 80px;
                width: 100%;
                margin-top: 50px;
               }
                .userAvatarImage {
                    border: 5px solid $wcfHeaderMenuBackground;
                    background: rgba($wcfHeaderMenuBackground, 1);
                    height: 100px;
                    margin-top: 100px;
                    width: auto;
                    -webkit-transition: 1s ease;
                    -o-transition: 1s ease;
                    -moz-transition: 1s ease;
                    transition: 1s ease;
                }
                > :first-child:not(:last-child) {
                    margin-right: 50%;
                    z-index: 1;
                }
            }
            .details.userInformation {
                margin-top: 20px;
                .inlineList {
                    margin-top: -2px;
                    justify-content: center;
                    > li {
                        text-align: center;
                        color: rgba($wcfSidebarText, 1);
                        font-size: 11px;
                        &:last-child {
                            width: 100%;
                        }
                    }
                }
                > ul.inlineList.commaSeparated {
                    position: absolute;
                    bottom: 1px;
                    right: 11px;
                    left: 11px;
                    padding: 5px 10px;
                    border-top: 1px solid rgba(darken($wcfSidebarBackground, 10%), 1);
                }
                > dl.plain.inlineDataList.small {
                    margin: 0 0 28px 0;
                    padding: 20px 10px;
                }
                > dl.inlineDataList {
                    > dt {
                        width: 70%;
                    }
                    > dd {
                        width: 28%;
                        text-align: right;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
        .containerList > li .buttonGroupNavigation {
            display: flex;
            width: 100%;
            justify-content: flex-end;
            opacity: 1;
            right: 0;
            top: 130px;
            background: transparent;
            padding: 3px 7px;
            > ul {
                background: transparent;
                border: none;
                border-radius: 0;
                > li {
                    padding: 0;
                    &:not(:last-child) {
                        border-right: 0;
                    }
                    > a {
                        margin-top: 0;
                        padding: 3px;
                        &:hover > .icon {
                            color: rgba($wcfSidebarBackground, 1);
                            text-shadow: none;
                        }
                        > .icon {
                            color: rgba(darken($wcfHeaderMenuBackground, 15%), 1);
                            text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
                        }
                    }
                }
            }
        }
    }
    .containerList.userList > li {
        @include screen-lg {
            flex: 25%;
            max-width: 25%;
        }
        @include screen-md {
            flex: 33.33%;
            max-width: 33.33%;
        }
    }
}
}

@if #{$wcf_option_memberlist_activate_v4} == 1 {
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList {
            .details.userInformation {
                > dl.inlineDataList {
                    > dt {
                        font-weight: bold;
                        width: 100% !important;
                    }
                    > dd {
                        width: 100% !important;
                        text-align: left !important;
                        margin-bottom: 10px !important;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
    }
}
body[id="tpl_wcf_membersList"] {
    @include screen-md-up {
        .containerList.userList {
                display: flex;
                flex-wrap: wrap;
                width: calc(100% + 20px);
                margin-left: -10px;
                > li {
                    display: flex;
                    justify-content: center;
                    padding: 10px;
                    border-bottom: none;
                    min-width: 220px;
                    background: transparent;
                    box-shadow: none;
                    border: none;
                }
            > li:hover {
                background: transparent;
                box-shadow: none;
                border: none;
            }
            .containerHeadline {
                z-index: 1;
                width: 100%;
                margin: 10px auto 0 auto;
                padding: 0 10px;
                p {
                    background: transparent;
                    text-align: center;
                    font-size: 12px;
                }
                > h3 {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    padding: 0;
                    > .badge {
                        margin: 0 auto;
                        padding: 4px 6px;
                        border-radius: 0;
                    }
                    span.icon.icon16.fa-lock.jsUserBanned {
                        margin-top: -24px;
                        margin-bottom: 8px;
                    }
                    > a.username.userLink, a.username {
                        background: transparent;
                        padding: 5px;
                    }
                }
            }
            .box48 {
                position: relative;
                flex-direction: column;
                width: 100%;
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPElEQVQoU2NkIA5IMRKhToqBgeEZIYVgRSDD8CmEK8KnEEURLoUYirApxKoIXSFORcgK8SqCKSSoCKQQAJD/CSUFonnJAAAAAElFTkSuQmCC) repeat, rgba($wcfSidebarBackground, 1);
                padding: 0;
                min-height: 450px;
                &::before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 115px;
                    background: rgba($wcfHeaderBackground, 1);
                    border-top: 33px solid rgba($wcfHeaderMenuBackground, 1);
                }
                > :last-child {
                    width: 100%;
                }
                > a {
                    z-index: 1;
                    margin-bottom: 0;
                }
                .userListItemBackground {
            position: absolute;
            background-size:cover;
            display:block;
            height:115px;
            width:100%;
           }
                .userAvatarImage {
                    border: 5px solid rgba($wcfHeaderBackground, 1);
                    background: rgba($wcfHeaderBackground, 1);
                    height: 140px;
                    width: auto;
                    margin-top: 40px;
                }
                > :first-child:not(:last-child) {
                    margin-right: 0;
                    z-index: 1;
                }
            }
            .details.userInformation {
                .inlineList {
                    margin-top: -2px;
                    justify-content: center;
                    > li {
                        text-align: center;
                        color: rgba($wcfSidebarBackground, 1);
                        font-size: 11px;
                        &:last-child {
                            width: 100%;
                        }
                    }
                }
                > ul.inlineList.commaSeparated {
                    position: absolute;
                    bottom: 1px;
                    right: 0;
                    left: 0;
                    padding: 5px 10px;
                    background: rgba($wcfHeaderMenuBackground, 1);
                }
                > dl.plain.inlineDataList.small {
                    margin: 0 0 28px 0;
                    padding: 20px 10px;
                }
                > dl.inlineDataList {
                    > dt {
                        width: 70%;
                    }
                    > dd {
                        width: 28%;
                        text-align: right;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
        .containerList > li .buttonGroupNavigation {
            display: flex;
            width: 100%;
            justify-content: center;
            opacity: 1;
            right: 0;
            top: 3px;
            background: transparent;
            padding: 3px 5px 13px 3px;
            z-index: 1;
            > ul {
                background: transparent;
                border: none;
                border-radius: 0;
                > li {
                    padding: 0;
                    > a {
                        margin-top: -180px;
                        margin-bottom: -10px;
                        &:hover > .icon {
                            color: rgba($wcfSidebarBackground, 1);
                            text-shadow: none;
                        }
                        > .icon {
                            color: rgba(darken($wcfHeaderMenuBackground, 15%), 1);
                            text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
                        }
                    }
                }
            }
        }
    }
    .containerList.userList > li {
        @include screen-lg {
            flex: 25%;
            max-width: 25%;
        }
        @include screen-md {
            flex: 33.33%;
            max-width: 33.33%;
        }
    }
}
}


//#############################################//
//############### LoSti's World ###############//
//############### MemberList V3 ###############//
//#############################################//
@if #{$wcf_option_teamlist_activate_v1} == 1 {
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList {
            .details.userInformation {
                > dl.inlineDataList {
                    > dt {
                        font-weight: bold;
                        width: 100% !important;
                    }
                    > dd {
                        width: 100% !important;
                        text-align: left !important;
                        margin-bottom: 10px !important;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
    }
}
body[id="tpl_wcf_team"] {
    @include screen-md-up {
        .containerList.userList {
                display: flex;
                flex-wrap: wrap;
                width: calc(100% + 20px);
                margin-left: -10px;
                > li {
                    display: flex;
                    justify-content: center;
                    padding: 10px;
                    border-bottom: none;
                    margin-top: 70px;
                    min-width: 220px;
                    background: transparent;
                    box-shadow: none;
                    border: none;
                }
            > li:hover {
                background: transparent;
                box-shadow: none;
                border: none;
            }
            .containerHeadline {
                margin-top: 80px;
                p {
                    background: rgba(darken($wcfSidebarBackground, 15%), 1);
                    text-align: center;
                    font-size: 12px;
                }
                > h3 {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    padding: 0;
                    > .badge {
                        min-width: 100%;
                        max-width: 100%;
                        padding: 4px 6px;
                        border-radius: 0;
                    }
                    span.icon.icon16.fa-lock.jsUserBanned {
                        margin-top: -24px;
                        margin-bottom: 8px;
                    }
                    > a.username.userLink, a.username {
                        background: rgba(darken($wcfSidebarBackground, 15%), 1);
                        padding: 5px;
                    }
                }
            }
            .box48 {
                position: relative;
                flex-direction: column;
                width: 100%;
                background: rgba($wcfSidebarBackground, 1);
                padding: 0;
                min-height: 400px;
                &::before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 140px;
                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPElEQVQoU2NkIA5IMRKhToqBgeEZIYVgRSDD8CmEK8KnEEURLoUYirApxKoIXSFORcgK8SqCKSSoCKQQAJD/CSUFonnJAAAAAElFTkSuQmCC) repeat, rgba($wcfHeaderBackground, 1);
                    border-bottom: 33px solid rgba($wcfHeaderMenuBackground, 1);
                }
                > :last-child {
                    width: 100%;
                }
                > a {
                    z-index: 1;
                    margin-bottom: 0;
                }
                .userListItemBackground {
                position: absolute;
                background-size:cover;
                display:block;
                height:105px;
                width:100%;
               }
                .userAvatarImage {
                    border: 5px solid rgba($wcfHeaderBackground, 1);
                    background: rgba($wcfHeaderBackground, 1);
                    height: 120px;
                    width: auto;
                    margin-top: -60px;
                }
                > :first-child:not(:last-child) {
                    margin-right: 0;
                    z-index: 1;
                }
            }
            .details.userInformation {
                .inlineList {
                    margin-top: -2px;
                    justify-content: center;
                    > li {
                        text-align: center;
                        color: rgba($wcfSidebarText, 1);
                        font-size: 11px;
                        &:last-child {
                            width: 100%;
                        }
                    }
                }
                > ul.inlineList.commaSeparated {
                    position: absolute;
                    bottom: 1px;
                    right: 11px;
                    left: 11px;
                    padding: 5px 10px;
                    border-top: 1px solid rgba(darken($wcfSidebarBackground, 10%), 1);
                }
                > dl.plain.inlineDataList.small {
                    margin: 0 0 28px 0;
                    padding: 20px 10px;
                }
                > dl.inlineDataList {
                    > dt {
                        width: 70%;
                    }
                    > dd {
                        width: 28%;
                        text-align: right;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
        .containerList > li .buttonGroupNavigation {
            display: flex;
            width: 100%;
            justify-content: center;
            opacity: 1;
            right: 0;
            top: 110px;
            background: transparent;
            padding: 3px 5px;
            > ul {
                background: transparent;
                border: none;
                border-radius: 0;
                > li {
                    padding: 0;
                    > a {
                        margin-top: -180px;
                        margin-bottom: -10px;
                        &:hover > .icon {
                            color: rgba($wcfSidebarBackground, 1);
                            text-shadow: none;
                        }
                        > .icon {
                            color: rgba(darken($wcfHeaderMenuBackground, 15%), 1);
                            text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
                        }
                    }
                }
            }
        }
    }
    .containerList.userList > li {
        @include screen-lg {
            flex: 25%;
            max-width: 25%;
        }
        @include screen-md {
            flex: 33.33%;
            max-width: 33.33%;
        }
    }
}
}

@if #{$wcf_option_teamlist_activate_v2} == 1 {
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList {
            .details.userInformation {
                > dl.inlineDataList {
                    > dt {
                        font-weight: bold;
                        width: 100% !important;
                    }
                    > dd {
                        width: 100% !important;
                        text-align: left !important;
                        margin-bottom: 10px !important;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
    }
}
body[id="tpl_wcf_team"] {
    @include screen-md-up {
        .containerList.userList {
            display: flex;
            flex-wrap: wrap;
            width: calc(100% + 20px);
            margin-left: -10px;
            > li {
                display: flex;
                justify-content: flex-start;
                padding: 10px;
                border-bottom: none;
                margin-top: 10px;
                min-height: 300px;
                background: transparent;
                box-shadow: none;
                border: none;
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 10px;
                    width: 68px;
                    height: 100%;
                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAAN0lEQVQoU2P8//+/LyMj42YGBgYGXGxG+isyZmRkPAt1E1Y2yE3UUyTFyMj4DGodVjbIOuooAgBGaXgLQ0R8KQAAAABJRU5ErkJggg==) top left repeat-x, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAARElEQVQoU2P8//+/FCMj4zMGBgYGXGxG6ikCWYMN/P//35iRkfEsSA5kHZyDi02xIl9GRsbNMOvgnP///2Nlg6yjjiIAd6FwC4q4dNIAAAAASUVORK5CYII=) bottom left repeat-x, rgba($wcfHeaderBackground, 1);
                    -webkit-box-shadow: 10px 0px 5px -8px rgba(0,0,0,0.25);
                    -moz-box-shadow: 10px 0px 5px -8px rgba(0,0,0,0.25);
                    box-shadow: 10px 0px 5px -8px rgba(0,0,0,0.25);
                }
            }
            > li:hover {
                background: transparent;
                background: transparent;
                box-shadow: none;
                border: none;
            }
            > li .buttonGroupNavigation {
                display: flex;
                align-items: flex-end;
                width: 68px;
                height: 100%;
                justify-content: center;
                opacity: 1;
                left: 10px;
                top: 0;
                padding-bottom: 10px; 
                background: transparent;
                > ul {
                    display: block;
                    background: transparent;
                    border: none;
                    border-radius: 0;
                    > li {
                        padding: 0;
                        &:not(:last-child) {
                            border-right: 0;
                        }
                        > a {
                            margin-top: 0;
                            &:hover > .icon {
                                color: rgba($wcfSidebarBackground, 1);
                                text-shadow: none;
                            }
                            > .icon {
                                color: rgba(darken($wcfHeaderBackground, 15%), 1);
                                text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
                            }
                        }
                    }
                }
            }
            .box48 {
                width: 100%;
                background: rgba($wcfSidebarBackground, 1);
                border: 1px solid rgba(darken($wcfSidebarBackground, 5%), 1);
                padding: 0;
                align-items: flex-start;
                border-radius: 0 3px 3px 0;
                > :last-child {
                    width: 100%;
                }
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 78px;
                    border-style: solid;
                    border-width: 10px 0 0 10px;
                    border-color: transparent transparent transparent rgba(darken($wcfHeaderBackground, 15%), 1);
                }
                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 78px;
                    border-style: solid;
                    border-width: 10px 10px 0 0;
                    border-color: rgba(darken($wcfHeaderBackground, 15%), 1) transparent transparent transparent;
                }
                > a {
                    z-index: 1;
                }
                .userAvatarImage {
                    border: 5px solid $wcfHeaderBackground;
                    background: $wcfHeaderBackground;
                    height: 80px;
                    width: auto;
                    margin-right: 5px;
                    margin-top: 10px;
                    margin-left: -7px;
                }
                > :first-child:not(:last-child) {
                    margin-right: 0;
                    z-index: 1;
                }
            }
            .containerHeadline {
                width: calc(100% - 20px);
                margin: 10px auto 0 auto;
                p {
                    background: rgba(darken($wcfSidebarBackground, 15%), 1);
                    text-align: center;
                    font-size: 12px;
                }
                > h3 {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    justify-content: center;
                    padding: 0;
                    > .badge {
                        max-width: 100%;
                        min-width: 100%;
                        padding: 4px 6px;
                        border-radius: 0;
                    }
                    span.icon.icon16.fa-lock.jsUserBanned {
                        margin-top: -24px;
                        margin-bottom: 8px;
                    }
                    > a.username.userLink, a.username {
                        width: 100%;
                        padding: 5px;
                        background: rgba(darken($wcfSidebarBackground, 10%), 1);
                    }
                }
            }
        }
        .details.userInformation {
            .inlineList {
                margin-top: -2px;
                justify-content: center;
                > li {
                    text-align: center;
                    color: rgba($wcfHeaderBackground, 1);
                    font-size: 11px;
                    &:last-child {
                        width: 100%;
                    }
                }
            }
            > ul.inlineList.commaSeparated {
                position: absolute;
                bottom: 11px;
                right: 21px;
                left: 100px;
                padding: 5px 10px;
                border-top: 1px solid rgba(darken($wcfSidebarBackground, 10%), 1);
            }
            > dl.plain.inlineDataList.small {
                margin: 0 0 28px 0;
                padding: 20px 10px;
            }
            > dl.inlineDataList {
                > dt {
                    width: 70%;
                }
                > dd {
                    width: 28%;
                    text-align: right;
                }
                > dd:not(:last-of-type):after {
                    display: none;
                }
            }
        }
    }
    .containerList.userList > li {
        @include screen-lg {
            flex: 33.33%;
            min-width: 33.33%;
            max-width: 33.33%;
        }
        @include screen-md {
            flex: 50%;
            min-width: 50%;
            max-width: 50%;
        }
    }
}
}

@if #{$wcf_option_teamlist_activate_v3} == 1 {

body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList {
            .details.userInformation {
                > dl.inlineDataList {
                    > dt {
                        font-weight: bold;
                        width: 100% !important;
                    }
                    > dd {
                        width: 100% !important;
                        text-align: left !important;
                        margin-bottom: 10px !important;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
    }
}
body[id="tpl_wcf_team"] {
    @include screen-md-up {
        .containerList.userList {
                display: flex;
                flex-wrap: wrap;
                width: calc(100% + 20px);
                margin-left: -10px;
                > li {
                    display: flex;
                    justify-content: center;
                    padding: 10px;
                    border-bottom: none;
                    min-width: 240px;
                    background: transparent;
                    box-shadow: none;
                    border: none;
                }
                .box48:hover .userAvatarImage {
                    -webkit-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    transform: rotate(360deg);
                    -webkit-transition: 1s ease;
                    -o-transition: 1s ease;
                    transition: 1s ease;
                }
            > li:hover {
                background: transparent;
                box-shadow: none;
                border: none;
            }
            .containerHeadline {
                position: absolute;
                top: 10px;
                left: -5px;
                z-index: 2;
                width: calc(100% + 10px);
                -webkit-box-shadow: 0px 10px 5px -5px rgba(0,0,0,0.25);
                -moz-box-shadow: 0px 10px 5px -5px rgba(0,0,0,0.25);
                box-shadow: 0px 10px 5px -5px rgba(0,0,0,0.25);
                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: -5px;
                    border-style: solid;
                    border-width: 0 5px 5px 0;
                    border-color: transparent black transparent transparent;
                }
                &::after {
                    content: "";
                    position: absolute;
                    right: 0;
                    bottom: -5px;
                    border-style: solid;
                    border-width: 5px 5px 0 0;
                    border-color: black transparent transparent transparent;
                }
                p {
                    background: rgba(darken($wcfSidebarBackground, 15%), 1);
                    text-align: center;
                    font-size: 12px;
                }
                > h3 {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    padding: 0;
                    > .badge {
                        max-width: 100%;
                        min-width: 100%;
                        padding: 4px 6px;
                        border-radius: 0;
                        top: 0;
                    }
                    span.icon.icon16.fa-lock.jsUserBanned {
                        margin-top: -24px;
                        margin-bottom: 8px;
                    }
                    > a.username.userLink, a.username {
                        background: rgba(darken($wcfSidebarBackground, 15%), 1);
                        border-top: 1px solid lighten($wcfSidebarBackground, 5%);
                        padding: 5px;
                    }
                }
            }
            > li .box48 {
                position: relative;
                flex-direction: column;
                width: 100%;
                background: rgba($wcfSidebarBackground, 1);
                padding: 0;
                min-height: 400px;
                &::before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 163px;
                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPElEQVQoU2NkIA5IMRKhToqBgeEZIYVgRSDD8CmEK8KnEEURLoUYirApxKoIXSFORcgK8SqCKSSoCKQQAJD/CSUFonnJAAAAAElFTkSuQmCC) repeat, rgba($wcfHeaderBackground, 1);
                    border-bottom: 33px solid $wcfHeaderMenuBackground;
                }
                > :last-child {
                    width: 100%;
                }
                > a {
                    z-index: 1;
                    margin-top: 0;
                    margin-bottom: -10px;
                }
                .userAvatarImage {
                    border: 5px solid $wcfHeaderMenuBackground;
                    background: rgba($wcfHeaderMenuBackground, 1);
                    height: 100px;
                    margin-top: 100px;
                    width: auto;
                    -webkit-transition: 1s ease;
                    -o-transition: 1s ease;
                    -moz-transition: 1s ease;
                    transition: 1s ease;
                }
                > :first-child:not(:last-child) {
                    margin-right: 50%;
                    z-index: 1;
                }
            }
            .details.userInformation {
                margin-top: 20px;
                .inlineList {
                    margin-top: -2px;
                    justify-content: center;
                    > li {
                        text-align: center;
                        color: rgba($wcfSidebarText, 1);
                        font-size: 11px;
                        &:last-child {
                            width: 100%;
                        }
                    }
                }
                > ul.inlineList.commaSeparated {
                    position: absolute;
                    bottom: 1px;
                    right: 11px;
                    left: 11px;
                    padding: 5px 10px;
                    border-top: 1px solid rgba(darken($wcfSidebarBackground, 10%), 1);
                }
                > dl.plain.inlineDataList.small {
                    margin: 0 0 28px 0;
                    padding: 20px 10px;
                }
                > dl.inlineDataList {
                    > dt {
                        width: 70%;
                    }
                    > dd {
                        width: 28%;
                        text-align: right;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
        .containerList > li .buttonGroupNavigation {
            display: flex;
            width: 100%;
            justify-content: flex-end;
            opacity: 1;
            right: 0;
            top: 130px;
            background: transparent;
            padding: 3px 7px;
            > ul {
                background: transparent;
                border: none;
                border-radius: 0;
                > li {
                    padding: 0;
                    &:not(:last-child) {
                        border-right: 0;
                    }
                    > a {
                        margin-top: 0;
                        padding: 3px;
                        &:hover > .icon {
                            color: rgba($wcfSidebarBackground, 1);
                            text-shadow: none;
                        }
                        > .icon {
                            color: rgba(darken($wcfHeaderMenuBackground, 15%), 1);
                            text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
                        }
                    }
                }
            }
        }
    }
    .containerList.userList > li {
        @include screen-lg {
            flex: 25%;
            max-width: 25%;
        }
        @include screen-md {
            flex: 33.33%;
            max-width: 33.33%;
        }
    }
}
}

@if #{$wcf_option_teamlist_activate_v4} == 1 {
body[id="tpl_wcf_usersOnlineList"] {
    @include screen-md-up {
        .containerList {
            .details.userInformation {
                > dl.inlineDataList {
                    > dt {
                        font-weight: bold;
                        width: 100% !important;
                    }
                    > dd {
                        width: 100% !important;
                        text-align: left !important;
                        margin-bottom: 10px !important;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
    }
}
body[id="tpl_wcf_team"] {
    @include screen-md-up {
        .containerList.userList {
                display: flex;
                flex-wrap: wrap;
                width: calc(100% + 20px);
                margin-left: -10px;
                > li {
                    display: flex;
                    justify-content: center;
                    padding: 10px;
                    border-bottom: none;
                    min-width: 220px;
                    background: transparent;
                    box-shadow: none;
                    border: none;
                }
            > li:hover {
                background: transparent;
                box-shadow: none;
                border: none;
            }
            .containerHeadline {
                z-index: 1;
                width: 100%;
                margin: 10px auto 0 auto;
                padding: 0 10px;
                p {
                    background: transparent;
                    text-align: center;
                    font-size: 12px;
                }
                > h3 {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    padding: 0;
                    > .badge {
                        margin: 0 auto;
                        padding: 4px 6px;
                        border-radius: 0;
                    }
                    span.icon.icon16.fa-lock.jsUserBanned {
                        margin-top: -24px;
                        margin-bottom: 8px;
                    }
                    > a.username.userLink, a.username {
                        background: transparent;
                        padding: 5px;
                    }
                }
            }
            .box48 {
                position: relative;
                flex-direction: column;
                width: 100%;
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPElEQVQoU2NkIA5IMRKhToqBgeEZIYVgRSDD8CmEK8KnEEURLoUYirApxKoIXSFORcgK8SqCKSSoCKQQAJD/CSUFonnJAAAAAElFTkSuQmCC) repeat, rgba($wcfSidebarBackground, 1);
                padding: 0;
                min-height: 450px;
                &::before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 115px;
                    background: rgba($wcfHeaderBackground, 1);
                    border-top: 33px solid rgba($wcfHeaderMenuBackground, 1);
                }
                > :last-child {
                    width: 100%;
                }
                > a {
                    z-index: 1;
                    margin-bottom: 0;
                }
                .userListItemBackground {
            position: absolute;
            background-size:cover;
            display:block;
            height:115px;
            width:100%;
           }
                .userAvatarImage {
                    border: 5px solid rgba($wcfHeaderBackground, 1);
                    background: rgba($wcfHeaderBackground, 1);
                    height: 140px;
                    width: auto;
                    margin-top: 40px;
                }
                > :first-child:not(:last-child) {
                    margin-right: 0;
                    z-index: 1;
                }
            }
            .details.userInformation {
                .inlineList {
                    margin-top: -2px;
                    justify-content: center;
                    > li {
                        text-align: center;
                        color: rgba($wcfSidebarBackground, 1);
                        font-size: 11px;
                        &:last-child {
                            width: 100%;
                        }
                    }
                }
                > ul.inlineList.commaSeparated {
                    position: absolute;
                    bottom: 1px;
                    right: 0;
                    left: 0;
                    padding: 5px 10px;
                    background: rgba($wcfHeaderMenuBackground, 1);
                }
                > dl.plain.inlineDataList.small {
                    margin: 0 0 28px 0;
                    padding: 20px 10px;
                }
                > dl.inlineDataList {
                    > dt {
                        width: 70%;
                    }
                    > dd {
                        width: 28%;
                        text-align: right;
                    }
                    > dd:not(:last-of-type):after {
                        display: none;
                    }
                }
            }
        }
        .containerList > li .buttonGroupNavigation {
            display: flex;
            width: 100%;
            justify-content: center;
            opacity: 1;
            right: 0;
            top: 3px;
            background: transparent;
            padding: 3px 5px 13px 3px;
            z-index: 1;
            > ul {
                background: transparent;
                border: none;
                border-radius: 0;
                > li {
                    padding: 0;
                    > a {
                        margin-top: -180px;
                        margin-bottom: -10px;
                        &:hover > .icon {
                            color: rgba($wcfSidebarBackground, 1);
                            text-shadow: none;
                        }
                        > .icon {
                            color: rgba(darken($wcfHeaderMenuBackground, 15%), 1);
                            text-shadow: 0 1px 0 rgba(lighten($wcfHeaderBackground, 10%), .25);
                        }
                    }
                }
            }
        }
    }
    .containerList.userList > li {
        @include screen-lg {
            flex: 25%;
            max-width: 25%;
        }
        @include screen-md {
            flex: 33.33%;
            max-width: 33.33%;
        }
    }
}
}