table {
    border-collapse : collapse;
    border-spacing  : 0;
    }
body {
    background      : #e9e9e9;
    background-size : cover;
    font-family     : Verdana, Helvetica, Arial, sans-serif;
    font-size       : 12px;
    margin          : 0 !important;
    min-width       : 320px;
    }
#noscript {
    background  : red;
    font-size   : 20px;
    font-weight : bold;
    padding     : 50px;
    position    : fixed;
    text-align  : center;
    top         : 0;
    width       : 100%;
    z-index     : 1000;
    }
.bbcode_table {
    border          : 1px solid #ccc;
    border-collapse : collapse;
    }
#canv {
    position : fixed;
    z-index  : 100;
    }
*.hp {
    animation     : none !important;
    border-radius : 0 !important;
    box-shadow    : 0 0 0 !important;
    text-shadow   : 0 0 0 !important;
    transition    : none !important;
    }
.VideoPane-video {
    left       : 50%;
    min-height : 100%;
    min-width  : 101%;
    position   : fixed;
    top        : 50%;
    transform  : translate(-50%, -50%);
    z-index    : -2;
    }
/*
.videooverlay {
    position   : fixed;
    top        : 0;
    left       : 0;
    z-index    : -1;
    width      : 100%;
    height     : 100%;
    }
    */
.fancybox {
    overflow : visible !important;
    }
a {
    outline : 0 !important;
    }
a:active, a:link, a:visited {
    color           : black;
    text-decoration : none;
    transition      : color 0.3s linear;
    }
a:hover {
    color : darkorange;
    }
.Cdark {
    background : #ccc;
    }
.Cmite {
    background : #ddd;
    }
.Cnorm {
    background : #eee;
    }
.xswitch {
    cursor         : pointer;
    display        : inline-flex;
    vertical-align : middle;
    }
.xswitch input {
    display : none;
    }
.xswitch .buttonbackground:hover {
    cursor : pointer;
    }
.xswitch .buttonbackground {
    background-color : #ccc;
    border-radius    : 1.25rem;
    display          : block;
    height           : 12px;
    margin-top       : 2px;
    position         : relative;
    transition       : background-color 0.2s ease;
    width            : 30px;
    }
.xswitch input:checked + .buttonbackground {
    background-color : #64b464;
    }
.xswitch .buttonslider {
    background    : #ddd;
    border        : 1px solid #aaa;
    border-radius : 50%;
    display       : block;
    height        : 14px;
    left          : 0;
    position      : absolute;
    top           : -0.2em;
    transition    : all 0.2s ease;
    width         : 14px;
    }
.xswitch input:checked + .buttonbackground .buttonslider {
    background : #eee;
    left       : 15px;
    }
input[type=date] {
    resize : none;
    }
input[type=checkbox] {
    cursor : pointer;
    height : 15px;
    width  : 15px;
    }
input[type=radio] {
    cursor         : pointer;
    margin-top     : -1px;
    vertical-align : middle;
    }
select, textarea, input, button {
    border          : 1px solid #cccccc;
    border-radius   : 2px;
    box-sizing      : border-box;
    color           : #222222;
    font-family     : Verdana, Helvetica, Arial, sans-serif;
    font-size       : 11px;
    padding         : 6px;
    resize          : vertical;
    text-decoration : none;
    }
input[type=submit], input[type=button], button, a.button, .shfbutton {
    background    : #333;
    border        : 0;
    border-radius : 2px;
    box-sizing    : border-box;
    color         : white !important;
    cursor        : pointer;
    outline       : none;
    padding       : 6px !important;
    }
input[type=submit].disabled {
    background : #666;
    cursor     : not-allowed;
    }
input[type=submit]:active, input[type=button]:active, button:active, a.button:active, .shfbutton:active {
    background : darkorange;
    color      : white;
    }
input[type=submit].loaders, input[type=button].loaders, button.loaders, a.button.loaders {
    background       : url('/include/images/icons/searchload.gif') no-repeat right 10px center;
    background-color : #333 !important;
    padding-right    : 30px !important;
    pointer-events   : none;
    }
input[type=submit].select, input[type=button].select, button.select, a.button.select, .shfbutton.select {
    background : darkorange;
    color      : white;
    }
.clear {
    clear : both;
    }
.logbuttbar {
    display : flex;
    }
.logbuttbar > * {
    flex         : 1 100%;
    margin-right : 5px;
    }
#loginin {
    color      : white;
    list-style : none;
    margin     : 0;
    padding    : 0;
    position   : absolute;
    right      : 20px;
    }
#loginin li {
    font-size : 13px;
    }
#loginin li a {
    color : white;
    }
nav {
    backface-visibility : hidden;
    background          : #2b2b2b;
    border-bottom       : 3px solid darkorange;
    border-top          : 20px solid darkorange;
    bottom              : 0;
    color               : white;
    line-height         : 45px;
    margin-top          : -20px;
    position            : relative;
    width               : 100%;
    z-index             : 106;
    }
nav.shadow {
    z-index : 102;
    }
nav > ul {
    align-items         : stretch;
    backface-visibility : hidden;
    display             : flex;
    justify-content     : space-between;
    list-style          : none;
    margin              : 0;
    padding             : 0;
    }
nav > ul > * {
    flex         : 1;
    margin-right : 2px;
    }
nav > ul > *:last-child {
    margin-right : 0;
    }
nav > ul > li {
    cursor     : pointer;
    position   : relative;
    text-align : center;
    }
nav > ul > li:last-child {
    margin-right : 0;
    }
nav > ul li a {
    background  : linear-gradient(to top, #222, #2c2b2b);
    color       : white !important;
    display     : block;
    font-size   : 13px;
    position    : relative;
    text-shadow : 0 1px 1px black;
    transform   : perspective(1px) translateZ(0);
    transition  : all 0.2s linear !important;
    }
nav > ul li a:before {
    background                  : darkorange;
    bottom                      : 0;
    content                     : '';
    left                        : 0;
    position                    : absolute;
    right                       : 0;
    top                         : 0;
    transform                   : scaleY(0);
    transform-origin            : 50%;
    -webkit-transition-duration : 0.2s;
    transition-duration         : 0.2s;
    transition-property         : transform;
    transition-timing-function  : ease-out;
    }
nav > ul li a:hover {
    z-index : 1;
    }
nav > ul li a:hover:before {
    transform : scaleY(1);
    z-index   : -10;
    }
nav > ul > li > a:hover:before {
    transform : scaleY(1.1);
    }
nav > ul > li ul:before {
    content  : '';
    height   : 3px;
    left     : 0;
    position : absolute;
    top      : -3px;
    width    : 100%;
    }
nav > ul > li ul {
    border      : 0 solid #222 !important;
    box-shadow  : 0 10px 15px rgba(0, 0, 0, 0.5);
    box-sizing  : border-box;
    left        : 0;
    line-height : 38px;
    list-style  : none;
    margin      : 0;
    opacity     : 0;
    padding     : 0;
    position    : absolute;
    top         : 70px;
    transition  : all 0.35s ease-in-out;
    visibility  : hidden;
    width       : 100%;
    z-index     : 100;
    }
nav > ul > li ul a {
    font-size : 13px;
    }
nav > ul > li > ul > li > ul {
    border        : 0;
    border-radius : 0;
    left          : 100%;
    top           : 0;
    }
nav > ul li:hover > ul {
    border-top : 0;
    opacity    : 1;
    top        : 48px;
    visibility : visible;
    }
#hmenu {
    background    : #222;
    border-bottom : 2px solid darkorange;
    color         : #fff;
    padding       : 5px 10px;
    text-shadow   : 0 1px 1px black;
    }
#hmenu a {
    color       : white;
    text-shadow : 0 1px 1px black;
    transition  : all 0.2s linear;
    }
#hmenu a:hover {
    color : darkorange;
    }
#headline {
    background    : #222;
    border-bottom : 1px solid #444;
    box-shadow    : 0 3px 12px rgba(0, 0, 0, .5);
    line-height   : 55px;
    min-height    : 55px;
    position      : fixed;
    top           : 0;
    width         : 100%;
    z-index       : 117;
    }
.headin {
    margin    : 0 auto;
    max-width : 1100px;
    padding   : 0 10px;
    position  : relative;
    width     : 100%;
    }
.darkmode_switch {
    align-items : center;
    display     : flex;
    left        : 400px;
    position    : absolute;
    text-align  : center;
    top         : 1px;
    width       : 100%;
    }
.darkmode_switch h1 {
    color       : #ddd;
    font-size   : 14px;
    font-weight : normal;
    margin      : 0 10px 0 0;
    text-shadow : 0 1px 1px black;
    }
.darkmode_switch #dswitch {
    display : none;
    }
.darkmode_switch #dswitch + label .buttonbackground:hover {
    cursor : pointer;
    }
.darkmode_switch .buttonbackground {
    background-color : #ccc;
    border-radius    : 1.25rem;
    display          : block;
    height           : 19px;
    margin           : 0.5rem auto;
    position         : relative;
    transition       : background-color 0.2s ease;
    width            : 50px;
    }
.darkmode_switch #dswitch:checked + label .buttonbackground {
    background-color : #64b464;
    }
.darkmode_switch .buttonslider {
    background    : #ddd;
    border        : 1px solid #aaa;
    border-radius : 50%;
    box-shadow    : 0 4px 3px rgba(0, 0, 0, 0.3);
    display       : block;
    height        : 25px;
    left          : 0;
    position      : absolute;
    top           : -4px;
    transition    : all 0.2s ease;
    width         : 25px;
    }
.darkmode_switch #dswitch:checked + label .buttonslider {
    background : #eee;
    left       : 27px;
    }
#ustats {
    left     : 0;
    position : absolute;
    }
#barmenu {
    align-items : center;
    color       : #ddd;
    display     : flex;
    line-height : normal;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    position    : absolute;
    right       : 10px;
    top         : 4px;
    }
#barmenu > li {
    border-radius : 10px;
    cursor        : pointer;
    font-size     : 30px;
    height        : 48px;
    line-height   : 48px;
    margin        : 0 10px 0 10px;
    outline       : 0;
    position      : relative;
    text-align    : center;
    user-select   : none;
    width         : 48px;
    }
#barmenu > li#create {
    font-size : 15px;
    height    : auto;
    padding   : 0 10px;
    width     : auto;
    }
#barmenu > li:hover {
    background : #444;
    }
#barmenu > li.select {
    background : #444;
    }
.roundavatar img {
    background    : #444;
    border-radius : 100px !important;
    margin-top    : 3px;
    padding       : 3px;
    }
#barmenu > li ul:before {
    border-bottom : 15px solid #555;
    border-left   : 13px solid transparent;
    border-right  : 13px solid transparent;
    border-top    : 15px solid transparent;
    content       : '';
    height        : 0;
    position      : absolute;
    right         : 11px;
    top           : -30px;
    width         : 0;
    }
#barmenu > li ul:after {
    content  : '';
    height   : 30px;
    left     : 0;
    position : absolute;
    top      : -28px;
    width    : 100%;
    }
#barmenu > li ul {
    background-image : linear-gradient(to bottom, #333, #1f1f1f);
    border           : 1px solid #111;
    border-radius    : 6px;
    box-shadow       : 0 1px 0 rgba(255, 255, 255, .15) inset;
    box-sizing       : border-box;
    color            : white;
    cursor           : default;
    display          : none;
    font-size        : 12px;
    line-height      : normal;
    list-style       : none;
    min-width        : 14em;
    padding          : 10px;
    position         : absolute;
    right            : 0;
    text-align       : left;
    text-shadow      : 0 1px 1px black;
    top              : 64px;
    white-space      : nowrap;
    }
#barmenu > li ul a {
    color : white;
    }
#barmenu > li ul:after {
    border-radius : 6px;
    box-shadow    : 0 3px 10px rgba(0, 0, 0, 1);
    content       : '';
    height        : 100%;
    left          : 0;
    position      : absolute;
    top           : 0;
    width         : 100%;
    z-index       : -1;
    }
#barmenu > li:first-child ul.loggedin {
    min-width : 17em;
    }
#barmenu > li ul input, button {
    margin  : 2px 0;
    padding : 5px;
    }
#barmenu > li ul input[type=text], #barmenu > li ul input[type=password], #barmenu > li ul input[type=email] {
    width : 100%;
    }
#barmenu > li ul input[type=submit], button {
    cursor : pointer;
    }
#getnotifications li {
    align-items     : center;
    border-bottom   : 1px dotted #434343;
    border-radius   : 4px;
    cursor          : pointer;
    display         : flex;
    flex-flow       : row;
    justify-content : space-between;
    margin          : 0 0;
    min-width       : 350px;
    padding         : 10px 10px 5px 10px;
    text-shadow     : 0 1px 1px black;
    }
#getnotifications li:hover {
    background    : #555 !important;
    border-radius : 4px;
    }
#getnotifications li div {
    font-size    : 12px;
    margin-right : 10px;
    }
#getnotifications li > div img {
    border-radius : 100%;
    box-shadow    : 0 1px 5px black;
    }
#getnotifications li div p {
    font-size : 11px;
    margin    : 5px 0;
    padding   : 0;
    }
#getnotifications li div + div {
    flex        : 1 auto;
    white-space : normal;
    }
#getnotifications li:first-child {
    font-size : 12px;
    padding   : 0 10px 10px 10px;
    }
#getnotifications li:first-child span {
    cursor : pointer;
    }
#getnotifications li:first-child:hover {
    background : none !important;
    cursor     : default;
    }
#getnotifications li:last-child {
    border-bottom : 0;
    cursor        : default;
    display       : block;
    font-size     : 12px;
    margin-top    : 10px;
    padding       : 0;
    text-align    : center;
    }
#getnotifications li:last-child a:hover {
    color : darkorange;
    }
#getnotifications li:last-child:hover {
    background : none !important;
    }
a.userbutton {
    background      : #444;
    border-radius   : 4px;
    color           : inherit !important;
    display         : block;
    font-size       : 12px;
    font-weight     : normal;
    margin          : .3em 0;
    padding         : 5px;
    text-decoration : none;
    transition      : none;
    }
a.userbutton:hover {
    background : #555;
    }
a.userbutton.logout {
    background  : darkorange;
    color       : white !important;
    float       : right;
    padding     : 4px 8px 5px 8px;
    text-shadow : 0 1px 1px black;
    }
a.userbutton.logout:hover {
    background : darkorange;
    }
a.userbutton.logout:hover > span {
    background : darkorange;
    }
a.userbutton i {
    background     : darkorange;
    border-radius  : 100px;
    color          : white;
    display        : inline-block;
    font-style     : normal;
    font-weight    : bold;
    height         : 25px;
    line-height    : 25px;
    margin-right   : 6px;
    margin-top     : -2px;
    text-align     : center;
    text-shadow    : 0 1px 1px black;
    vertical-align : middle;
    width          : 25px;
    }
a.userbutton.logout span {
    font-size    : 1.1em;
    margin-right : 5px;
    }
.anzinfos {
    background    : darkorange;
    border-radius : 100px;
    color         : white;
    font-size     : 12px;
    font-weight   : normal;
    height        : 20px;
    line-height   : 20px;
    position      : absolute;
    right         : 0;
    text-shadow   : 0 1px 1px black;
    top           : 3px;
    width         : 20px;
    }
#spieleslider {
    background    : #111;
    border        : 3px solid darkorange;
    border-radius : 8px 0 0 8px;
    box-shadow    : 1px 3px 12px rgba(0, 0, 0, 0.6);
    position      : fixed;
    right         : -187px;
    top           : 150px;
    transition    : all 0.3s linear;
    width         : 180px;
    z-index       : 1000;
    }
#spieleslider h2 {
    color       : white;
    font-size   : 25px;
    text-align  : center;
    text-shadow : 0 1px 1px black;
    }
#spieleslider_game {
    background    : #111;
    border-bottom : 1px solid #333;
    border-left   : 3px solid darkorange;
    border-radius : 10px 0 0 10px;
    border-top    : 1px solid #333;
    box-shadow    : -3px 3px 5px rgba(0, 0, 0, 0.6);
    cursor        : pointer;
    height        : 50px;
    left          : -76px;
    padding       : 10px;
    position      : absolute;
    top           : 20px;
    width         : 50px;
    }
#spieleslider:hover {
    right : 0;
    }
#spieleslider_game img {
    left      : 50%;
    position  : absolute;
    top       : 50%;
    transform : translate(-50%, -50%);
    width     : 48px;
    }
#spul {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
#spul li {
    display        : inline-block;
    position       : relative;
    vertical-align : middle;
    }
#spul li a {
    border-radius : 8px;
    box-shadow    : 0 1px 10px rgba(0, 0, 0, 0.3) inset;
    display       : block;
    height        : 60px;
    margin        : 20px;
    width         : 60px;
    }
#spul li img {
    left      : 50%;
    position  : absolute;
    top       : 50%;
    transform : translate(-50%, -50%);
    width     : 48px;
    }
#logul {
    list-style : none;
    margin     : 0;
    padding    : 0;
    position   : absolute;
    right      : 20px;
    }
#logul li {
    display : inline-block;
    }
#logul li input {
    background-color : #111;
    border           : 1px solid #000;
    border-radius    : 0;
    color            : white;
    outline          : 0;
    padding          : 4px 6px 4px 6px;
    transition       : all .3s ease-in-out;
    }
.inner {
    margin    : 0 auto;
    max-width : 1100px;
    position  : relative;
    }
.outer {
    background    : #e1e1e1;
    border-bottom : 3px solid darkorange;
    border-radius : 10px;
    box-shadow    : 0 -2px 10px 2px #000000;
    box-sizing    : border-box;
    margin        : 65px auto 55px auto;
    max-width     : 1100px;
    }
header {
    background      : url(images/head.png) top center;
    background-size : 100% 100%;
    border-radius   : 10px 10px 0 0;
    cursor          : pointer;
    height          : 300px;
    position        : relative;
    transition      : all 0.2s linear !important;
    width           : 100%;
    z-index         : 107;
    }
header.shadow {
    z-index : 103;
    }
#content {
    align-items : flex-start;
    display     : flex;
    flex-flow   : row;
    }
#middle {
    background    : white;
    border-bottom : 2px solid #ababab;
    border-radius : 0 0 0 10px;
    flex          : 3 0;
    min-width     : 250px;
    position      : relative;
    }
#middle.forum {
    border-radius : 0 0 10px 10px;
    }
#right {
    border-bottom : 2px solid #ababab;
    border-radius : 4px 4px 0 0;
    color         : #000;
    flex          : 1.1 0;
    margin        : 10px 5px;
    min-width     : 285px;
    }
footer {
    background  : #111;
    border-top  : 1px solid darkorange;
    bottom      : 0;
    box-shadow  : 0 -3px 12px rgba(0, 0, 0, .5);
    color       : #ddd;
    left        : 0;
    line-height : 40px;
    min-height  : 40px;
    position    : fixed;
    width       : 100%;
    z-index     : 116;
    }
.footerin {
    align-items     : center;
    display         : flex;
    flex-flow       : row;
    justify-content : space-between;
    margin          : 0 auto;
    max-width       : 1100px;
    padding         : 0 10px;
    position        : relative;
    }
.footer_song {
    flex : 1;
    }
footer ul {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
footer ul li {
    color   : #ddd;
    display : inline;
    }
footer ul li a {
    color : #ddd !important;
    }
footer ul li a:hover {
    color : darkorange !important;
    }
#cop {
    text-align : right;
    }
#cop a {
    color : white;
    }
#cop a:hover {
    color : darkorange;
    }
#explode {
    background    : #e9e9e9;
    border-radius : 0 0 0 8px;
    color         : #000;
    margin        : 0 5px 5px 5px;
    padding       : 10px 5px;
    }
#explode.forum {
    border-radius : 0 0 8px 8px;
    margin        : 0 5px;
    }
.exin {
    background    : #fff;
    border-bottom : 2px solid #ababab;
    position      : relative;
    }
.exin .exin_h2 {
    background    : linear-gradient(to top, #222, #2c2b2b);
    border-bottom : 3px solid orange;
    border-radius : 4px 4px 0 0;
    color         : white;
    font-size     : 13px;
    font-weight   : normal;
    margin        : 0;
    padding       : 10px;
    position      : relative;
    text-align    : left;
    text-shadow   : 0 1px 1px black;
    }
.exin .exin_h2 a {
    color : white;
    }
.exin .exin_in {
    padding : 10px;
    }
.frh2 {
    border-bottom  : 1px solid #333;
    font-size      : 16px;
    margin         : 10px;
    padding-bottom : 5px;
    }
a.menu {
    background      : #030b1c;
    border          : solid #333 1px;
    color           : white;
    display         : block;
    font-size       : 15px;
    margin          : 2px;
    padding         : 4px;
    text-align      : center;
    text-decoration : none;
    transition      : all 0.4s linear;
    }
a.menu:hover {
    background : darkorange;
    }
.nav_head {
    background    : linear-gradient(to top, #222, #2c2b2b);
    border-bottom : 3px solid orange;
    border-radius : 4px 4px 0 0;
    color         : white;
    font-size     : 13px;
    padding       : 10px;
    text-shadow   : 0 1px 1px black !important;
    }
.nav_cont {
    background : #ffffff;
    padding    : 10px;
    text-align : center;
    }
.nav_cont img {
    max-width : 270px;
    }
#over {
    background-image : linear-gradient(to bottom, #1a2b4f 0%, #071229 100%);
    color            : white;
    font-size        : 12px;
    margin           : 10px 0 -7px 0;
    padding          : 10px;
    text-align       : center;
    }
#over .boxen {
    background-image : linear-gradient(to bottom, #1a2b4f 0%, #071229 100%);
    border           : solid #27395e 1px;
    box-shadow       : 0px -7px 7px -2px #0a1429;
    box-sizing       : border-box;
    display          : inline-block;
    height           : 85px;
    overflow         : hidden;
    text-align       : center;
    width            : 290px;
    }
#over .boxen:nth-child(2) div {
    left      : 50%;
    position  : absolute;
    top       : 50%;
    transform : translate(-50%, -50%);
    width     : 80px;
    }
.socials {
    left     : 0;
    position : absolute;
    right    : 0;
    top      : 20px;
    width    : 40px;
    z-index  : 10000;
    }
.socials a {
    display : block;
    }
.socials img {
    border-radius : 0 6px 6px 0;
    height        : 32px !important;
    width         : 40px !important;
    }
#socialbox {
    background-image : linear-gradient(to bottom, #1a2b4f 0%, #071229 100%);
    border           : solid #27395e 1px;
    box-shadow       : 0 -7px 7px -2px #0a1429;
    display          : none;
    margin-top       : 10px;
    padding          : 10px 0 10px 0;
    width            : 100%;
    }
.socials.long {
    position   : relative;
    text-align : center;
    top        : 2px;
    width      : 100%;
    }
.socials.long a {
    display        : inline-block;
    margin         : 0 5px 0 5px;
    vertical-align : middle;
    }
.socials.long img {
    border-radius : 0;
    }
#logtable input {
    margin : 2px
    }
#imgchange {
    left     : 0;
    margin   : 0;
    padding  : 0;
    position : fixed;
    top      : 0;
    z-index  : -1;
    }
ul#imagefades {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
/************************************************************************************
Streams
*************************************************************************************/
#chatopen {
    background  : #383635;
    border-top  : 3px solid #666;
    color       : white;
    cursor      : pointer;
    height      : 30px;
    line-height : 30px;
    margin-top  : 40px;
    text-align  : center;
    transition  : all 0.3s linear;
    }
#inview {
    background  : #383635;
    border-top  : 3px solid #666;
    color       : white;
    cursor      : pointer;
    float       : left;
    height      : 30px;
    line-height : 30px;
    margin      : 0 0 0 170px;
    text-align  : center;
    width       : 210px;
    }
.streamactions {
    float      : left;
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.streamactions li {
    background  : #383635;
    border-top  : 3px solid #666;
    color       : white;
    cursor      : pointer;
    display     : inline-block;
    height      : 30px;
    line-height : 30px;
    text-align  : center;
    transition  : all 0.3s linear;
    width       : 100px;
    }
.streamactions li:hover {
    background : #222222;
    }
.streamactions li.select {
    background : #222222;
    }
.streamformat {
    float      : right;
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.streamformat li {
    background  : #383635;
    border-top  : 3px solid #666;
    color       : white;
    cursor      : pointer;
    display     : inline-block;
    height      : 30px;
    line-height : 30px;
    text-align  : center;
    transition  : all 0.3s linear;
    width       : 100px;
    }
.streamformat li:hover {
    background : #222222;
    }
.streamformat li.select {
    background : #222222;
    }
.filters {
    list-style : none;
    margin     : 0 0 0 11px;
    padding    : 0;
    }
.filters li:first-child {
    background : #383635;
    border-top : 3px solid #666;
    border-top : 0;
    color      : white;
    cursor     : default;
    }
.filters li {
    background  : #383635;
    border-top  : 3px solid #666;
    color       : white;
    cursor      : pointer;
    display     : inline-block;
    height      : 30px;
    line-height : 30px;
    padding     : 2px 10px;
    text-align  : center;
    transition  : all 0.3s linear;
    }
.filters li:first-child:hover {
    background : #383635;
    }
.filters li:hover {
    background : #222222;
    }
.filters li.select {
    background : #222222;
    }
#gamecats {
    background   : #222222;
    border-top   : 3px solid #666;
    color        : white;
    cursor       : pointer;
    float        : right;
    margin-right : 11px;
    width        : 150px;
    }
.streamcontainer {
    display         : flex;
    flex-flow       : row wrap;
    justify-content : space-around;
    list-style      : none;
    margin          : 0;
    padding         : 0;
    }
.streamcontainer > li {
    background    : #242627;
    border-radius : 10px;
    border-top    : 3px solid #999;
    color         : white;
    height        : 400px;
    margin        : 10px 0;
    overflow      : hidden;
    padding       : 10px;
    position      : relative;
    width         : 500px;
    }
.streamcontainer > li h2 {
    color      : white;
    margin     : 0 0 10px 0;
    text-align : center;
    }
.streambild {
    height   : 310px;
    margin   : 0 auto;
    overflow : hidden;
    position : relative;
    width    : 480px;
    z-index  : 100;
    }
.streamtitle, .streamviewers, .streamlikes, .streamstatus {
    position : absolute;
    z-index  : 101;
    }
.streambild .channelbild {
    backface-visibility : hidden;
    height              : 100%;
    transition          : all 0.3s linear;
    width               : 100%;
    }
.streamstatus {
    background    : rgba(0, 0, 0, 0.6);
    border-radius : 10px;
    color         : white;
    left          : 10px;
    padding       : 5px 10px;
    top           : 10px;
    }
.streamstatus span {
    border-radius  : 100%;
    display        : inline-block;
    height         : 12px;
    margin-top     : -2px;
    vertical-align : middle;
    width          : 12px;
    }
.streamlikes {
    background    : rgba(0, 0, 0, 0.6);
    border-radius : 0 10px 10px 0;
    color         : white;
    padding       : 10px 15px;
    top           : 120px;
    transform     : translateX(-100%);
    transition    : all 0.3s linear;
    }
.streamlikes img {
    display        : inline-block;
    margin         : -4px 5px 0 0;
    vertical-align : middle;
    }
.streamviewers {
    background    : rgba(0, 0, 0, 0.6);
    border-radius : 10px;
    color         : white;
    padding       : 5px 10px;
    right         : 10px;
    top           : 10px;
    transition    : all 0.3s linear;
    }
.streamviewers img {
    display        : inline-block;
    margin         : -3px 5px 0 0;
    vertical-align : middle;
    }
.streamtitle {
    background  : rgba(0, 0, 0, 0.6);
    bottom      : -1px;
    color       : white;
    padding     : 10px 0;
    text-align  : center;
    text-shadow : 0 1px 1px black;
    width       : 100%;
    }
.streamtitle span {
    display    : block;
    font-size  : 14px;
    margin-top : 5px;
    }
.streamcontainer > li ul {
    list-style : none;
    margin     : 15px 0;
    padding    : 0;
    text-align : center;
    }
.streamcontainer > li ul li {
    display        : inline-block;
    margin         : 0 5px;
    vertical-align : middle;
    }
.streambild:hover .streamlikes {
    transform : translateX(0);
    }
.streambild:hover > .channelbild {
    transform : scale(1.2);
    }
.noin {
    filter : grayscale(100%);
    }
/************************************************************************************
LOGIN
*************************************************************************************/
#loginin {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
#loginin li {
    display : inline;
    margin  : 0 5px 0 5px;
    }
/************************************************************************************
PROFIL
*************************************************************************************/
.profilhead {
    background  : #333;
    color       : #fff;
    position    : relative;
    text-shadow : 0 1px 1px black;
    }
.profil {
    list-style : none;
    margin     : 10px 0 20px 0;
    padding    : 0;
    text-align : center;
    }
.profil li {
    background  : #ddd;
    border-top  : 3px solid #ccc;
    color       : black;
    cursor      : pointer;
    display     : inline-block;
    height      : 45px;
    line-height : 45px;
    outline     : 0;
    transition  : all 0.3s linear;
    width       : 147px;
    }
.profil.edit li {
    width : 149px;
    }
.profil li img {
    display        : inline-block;
    margin         : -3px 5px 0 0;
    vertical-align : middle;
    width          : 16px;
    }
.profil li i {
    color : #999;
    }
.profil li span {
    display        : inline-block;
    font-size      : 11px;
    margin-top     : -4px;
    vertical-align : middle;
    }
.profil li:hover {
    border-top : 3px solid darkorange;
    }
.profilinhalt {
    display : none;
    }
.profil li.select {
    border-top : 3px solid darkorange;
    }
.profilinhalt table {
    border          : 1px solid #ddd;
    border-collapse : collapse;
    border-radius   : 8px;
    color           : #000;
    width           : 100%;
    }
.profilinhalt.edit input[type=text], .profilinhalt.edit input[type=email], .profilinhalt.edit input[type=password] {
    width : 237px;
    }
.profilinhalt.edit select {
    width : 251px;
    }
.profilinhalt table td {
    border   : 1px solid #ddd;
    padding  : 10px;
    position : relative;
    }
.profilinhalt table td iframe {
    width : 100%;
    }
.profilinhalt table td a {
    color       : black;
    font-weight : normal
    }
.statscontainer span {
    display        : inline-block;
    text-align     : center;
    vertical-align : middle;
    width          : 50px;
    }
.statscontainer span + span {
    font-size  : 13px;
    text-align : right;
    width      : 50px;
    }
.statscontainer .balkenbg {
    border         : 1px solid #aaa;
    display        : inline-block;
    overflow       : hidden;
    padding        : 2px;
    vertical-align : middle;
    width          : 250px;
    }
.statscontainer .balken {
    background : darkorange;
    height     : 20px;
    max-width  : 250px;
    min-width  : 1px;
    position   : relative;
    }
#avainfo {
    left        : 0;
    line-height : 25px;
    position    : absolute;
    right       : 0;
    top         : 100px;
    }
.subsettings {
    display : none;
    }
.sortbilder {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.sortbilder li img {
    height : 80px;
    width  : 100px;
    }
/*Freunde*/
.frh2 {
    border-bottom  : 1px solid #666;
    font-size      : 16px;
    margin         : 10px;
    padding-bottom : 5px;
    position       : relative;
    }
.frh2 > form {
    position : absolute;
    right    : 0;
    top      : -10px;
    }
.pfreunde {
    display         : flex;
    flex-flow       : row wrap;
    justify-content : center;
    list-style      : none;
    margin          : 0;
    padding         : 0;
    }
.pfreunde > li {
    background : #f2f2f2;
    border     : 1px solid #ccc;
    box-sizing : border-box;
    margin     : 10px;
    min-height : 140px;
    overflow   : hidden;
    padding    : 10px;
    position   : relative;
    text-align : center;
    transition : all 0.3s linear;
    width      : 230px;
    }
.pfreunde.foto > li:hover {
    background : #dedede;
    }
.pfreunde > li .pfdetails {
    align-items     : center;
    display         : flex;
    justify-content : center;
    padding-top     : 5px;
    }
.pfreunde > li .pfdetails * {
    margin : 0 5px;
    }
.pfreunde > li > div:nth-child(3) {
    bottom   : 0px;
    color    : white;
    left     : 0;
    padding  : 5px;
    position : absolute;
    width    : 100%;
    }
.pfreunde.foto > li > a > div:nth-child(3) {
    bottom  : 0;
    color   : #000;
    left    : 0;
    padding : 5px;
    width   : 100%;
    }
.dfriend {
    list-style : none;
    margin     : 0;
    padding    : 0;
    position   : absolute;
    right      : 5px;
    top        : 10px;
    }
.dfriend > li {
    display : inline;
    margin  : 0 2px;
    }
/*Profilbesucher*/
#lbes {
    float        : left;
    padding-left : 8.5%;
    padding-top  : 10px;
    text-align   : center;
    width        : 10%;
    }
/*Box*/
.floatingbox {
    background    : white;
    border-radius : 6px;
    box-shadow    : 1px 3px 12px rgba(0, 0, 0, 0.6);
    font-size     : 12px;
    left          : 0;
    margin        : 0 auto;
    min-width     : 320px;
    opacity       : 0;
    position      : fixed;
    right         : 0;
    text-align    : center;
    top           : 0;
    width         : 45%;
    z-index       : 116;
    }
.floatingbox.select {
    opacity : 1;
    top     : 12%;
    }
.floatingbox.nocenter {
    text-align : left;
    }
.floatingbox > h2 {
    background  : #222;
    border-top  : 1px solid #333;
    color       : white;
    font-size   : 14px;
    margin      : 0;
    padding     : 15px 10px;
    position    : relative;
    text-shadow : 0 1px 1px black;
    user-select : none;
    }
.floatingbox > h2 > a {
    top : 15px !important;
    }
.floatin {
    max-height : 500px;
    overflow   : hidden;
    padding    : 10px;
    }
.closefloatbox {
    border        : 3px solid #222;
    border-radius : 100%;
    cursor        : pointer;
    font-size     : 18px;
    position      : absolute;
    right         : -5px;
    top           : -5px;
    transition    : all 0.3s linear;
    }
.closefloatbox:hover {
    transform : rotate(360deg);
    }
.shead {
    background    : darkorange;
    border-radius : 4px 4px 0 0;
    color         : white;
    font-size     : 13px;
    font-weight   : bold;
    height        : 30px;
    line-height   : 30px;
    position      : relative;
    text-align    : center;
    text-shadow   : 0 1px 1px black;
    }
.shead:hover {
    cursor : crosshair;
    }
.dhead {
    background     : #959595;
    background     : linear-gradient(to bottom, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
    border-radius  : 4px 4px 0 0;
    color          : #ffffff;
    font-size      : 12px;
    font-weight    : bold;
    height         : 15px;
    line-height    : 5px;
    padding-bottom : 5px;
    padding-top    : 5px;
    text-align     : center;
    text-shadow    : 0 1px 2px #000000;
    width          : 100%;
    }
.dcont {
    background    : #222222;
    border-radius : 4px;
    box-shadow    : 0 0 5px black;
    color         : #ffffff;
    font-size     : 11px;
    opacity       : 0.9;
    position      : fixed;
    text-align    : center;
    width         : 300px;
    z-index       : 111000;
    }
div.ui-datepicker {
    font-size : 13px;
    }
#mquote {
    background    : #222222;
    border        : 1px solid grey;
    border-radius : 4px 0 0 4px;
    bottom        : 100px;
    color         : #ffffff;
    height        : 30px;
    max-width     : 250px;
    opacity       : .75;
    padding       : 10px;
    position      : fixed;
    right         : 0;
    z-index       : 1000;
    }
/************************************************************************************
NEWS
*************************************************************************************/
.newscontainer {
    background    : #fff;
    border-bottom : 2px solid #ababab;
    border-radius : 4px 4px 0 0;
    margin-bottom : 20px;
    position      : relative;
    }
.newscontainer h2 {
    align-items     : center;
    background      : linear-gradient(to top, #222, #2c2b2b);
    border-bottom   : 3px solid darkorange;
    border-radius   : 4px 4px 0 0;
    color           : white;
    display         : flex;
    font-size       : 16px;
    font-style      : italic;
    font-weight     : normal;
    height          : 25px;
    justify-content : space-around;
    margin          : 0;
    padding         : 12px;
    position        : relative;
    text-align      : center;
    }
.newscontainer h2 img {
    left       : 10px;
    max-height : 35px;
    max-width  : 48px;
    position   : absolute;
    top        : inherit;
    }
.newscontainer .nfooter {
    border-top      : 1px solid #ccc;
    box-sizing      : border-box;
    display         : flex;
    flex-flow       : row wrap;
    justify-content : center;
    margin-top      : 5px;
    padding         : 10px 0;
    position        : relative;
    width           : 100%;
    }
.newscontainer .nfooter > * {
    margin  : 0;
    padding : 0;
    }
.newscontainer .newstext {
    display     : block;
    font-size   : 13px;
    line-height : 19px;
    padding     : 10px 10px 0 10px;
    }
.newscontainer .newstext .nbild {
    float     : left;
    margin    : 0 10px 0 -2px;
    max-width : 100%;
    position  : relative;
    width     : auto;
    }
.newsbewertung, .arcade {
    display        : inline-block;
    line-height    : 24px;
    vertical-align : middle;
    }
.nbrate {
    align-items : center;
    display     : flex;
    flex        : 1;
    font-size   : 13px;
    font-weight : bold;
    }
.nbrate > b {
    margin-right : 5px;
    }
/************************************************************************************
Punkte und Arcade
*************************************************************************************/
#pzentrum {
    list-style : none;
    margin     : 0;
    padding    : 0;
    text-align : center;
    }
#pzentrum li {
    background : #040617;
    border-top : 3px solid #3e517a;
    color      : #ffffff;
    cursor     : pointer;
    display    : inline-block;
    margin     : 4px 0 4px 0;
    position   : relative;
    text-align : center;
    }
#pzentrum li a {
    display : block;
    padding : 10px 15px 10px 15px;
    }
#pzentrum li:hover {
    border-top : 3px solid darkorange;
    }
#pzentrum li.active {
    border-top : 3px solid darkorange;
    }
#pointcontent {
    border  : 1px solid #3e517a;
    clear   : left;
    padding : 10px;
    }
.leftpoint {
    display        : inline-block;
    margin-right   : 20px;
    max-width      : 160px;
    vertical-align : top;
    }
.leftpoint a {
    background : #040617;
    display    : block;
    font-size  : 13px;
    padding    : 6px;
    text-align : center;
    }
.rightpoint {
    display        : inline-block;
    max-width      : 450px;
    vertical-align : top;
    }
.fc-event-container a {
    background : #ddd;
    border     : 0;
    }
/*****************************************************
Seitenanzeige
*****************************************************/
.dblinks {
    align-items     : center;
    display         : flex;
    flex-flow       : row wrap;
    justify-content : center;
    list-style      : none;
    margin          : 10px 0 20px 0;
    padding         : 0;
    position        : relative;
    z-index         : 100;
    }
.dblinks > li:first-child a:before {
    border-bottom : 6px solid transparent;
    border-left   : 5px solid transparent;
    border-right  : 5px solid transparent;
    border-top    : 6px solid white;
    content       : '';
    height        : 0;
    left          : 6px;
    position      : absolute;
    top           : 10px;
    width         : 0;
    }
.dblinks > li {
    margin      : 0 2px;
    position    : relative;
    user-select : none;
    }
.dblinks > li a {
    background      : #ddd;
    font-weight     : normal;
    padding         : 5px 10px;
    text-decoration : none;
    }
.dblinks > li a:hover {
    background : #333;
    color      : white;
    }
.dblinks > li:first-child a {
    background   : #333;
    color        : white;
    cursor       : pointer;
    padding-left : 21px;
    position     : relative;
    }
.dblinks > li.dbselect a {
    background : #333;
    color      : white;
    }
.dblinks > li.dbpfeil a span {
    display        : inline-block;
    margin-top     : -5px;
    vertical-align : middle;
    }
.dblinks > li:first-child ul {
    background : #ddd;
    border     : 1px solid #ccc;
    display    : none;
    font-size  : 12px;
    left       : 0;
    list-style : none;
    margin     : 0;
    padding    : 0;
    position   : absolute;
    top        : 25px;
    transition : left 0.3s linear;
    width      : 200px;
    }
.dblinks > li:first-child ul li {
    padding : 0 0 0 10px;
    }
.dblinks > li:first-child ul li input {
    margin-top : 1px;
    padding    : 2px 0;
    }
#rangspecial {
    background    : #222222;
    border-radius : 4px;
    box-shadow    : 0 0 5px black;
    color         : #000;
    display       : none;
    font-size     : 11px;
    opacity       : 0.99;
    overflow      : hidden;
    position      : fixed;
    width         : 420px;
    z-index       : 9998;
    }
.rangbaus {
    border        : 1px solid #555555;
    border-radius : 4px;
    float         : left;
    margin        : 11px;
    padding       : 10px;
    width         : 22%;
    }
#eventul {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
#eventul li {
    border-bottom : 1px dashed #3e517a;
    font-size     : 15px;
    padding       : 5px 0;
    }
#eventul li span {
    color     : #333;
    display   : block;
    font-size : 13px;
    }
#eventul li:last-child {
    border-bottom : 0;
    }
.nctext {
    color : black !important;
    }
.newscomcontainer {
    list-style : none;
    margin     : 10px 0 0 0;
    padding    : 0;
    }
.newscomcontainer li {
    display       : flex;
    margin-bottom : 25px;
    }
.newscomcontainer li div {
    box-sizing     : border-box;
    vertical-align : top;
    }
.newscomcontainer li div:first-child img {
    border        : 2px solid #aaa !important;
    border-radius : 100px !important;
    }
.newscomcontainer li div + div {
    flex        : 1 100%;
    margin-left : 10px;
    max-width   : 700px;
    }
.newscomcontainer li div span {
    align-items   : center;
    background    : #333;
    border-radius : 4px;
    color         : white;
    display       : flex;
    flex-flow     : row wrap;
    padding       : 4px 5px;
    position      : relative;
    }
.newscomcontainer li div span a {
    color        : white;
    margin-right : 4px;
    }
.newscomcontainer li div span i {
    font-style  : normal;
    margin-left : 6px;
    }
.newscomcontainer li div span p {
    color     : #ddd;
    font-size : 13px;
    margin    : 0;
    padding   : 0;
    position  : absolute;
    right     : 10px;
    top       : 6px;
    }
.newscomcontainer li div span b {
    font-weight  : normal;
    margin-right : 0;
    }
.newscomcontainer li div span + span {
    background : none;
    }
#totop:before {
    border-bottom : 15px solid rgba(255, 255, 255, 0.2);
    border-left   : 10px solid transparent;
    border-right  : 10px solid transparent;
    border-top    : 10px solid transparent;
    content       : '';
    height        : 0;
    left          : 14px;
    position      : absolute;
    top           : 14px;
    transition    : all 0.3s linear;
    width         : 0;
    }
#totop:hover:before {
    border-bottom : 15px solid rgba(255, 255, 255, 0.5);
    }
#totop {
    background    : rgba(0, 0, 0, 0.6);
    border-radius : 0 8px 8px 0;
    border-right  : 3px solid darkorange;
    bottom        : 150px;
    box-shadow    : 1px 3px 12px rgba(0, 0, 0, 0.7);
    cursor        : pointer;
    height        : 60px;
    left          : -60px;
    position      : fixed;
    transition    : all 0.3s linear;
    width         : 50px;
    z-index       : 107;
    }
#totop.open {
    left : 0;
    }
#totop:hover {
    background : rgba(0, 0, 0, 0.8);
    }
.nicescroll-cursors {
    background : darkorange !important;
    border     : 0 !important;
    }
/*Punktezentrum*/
.pzentrumlist {
    list-style : none;
    margin     : 10px 0 0 0;
    padding    : 0 0 10px 0;
    text-align : center;
    }
.pzentrumlist li {
    background : #dddddd;
    border-top : 3px solid #cccccc;
    color      : #222222;
    cursor     : pointer;
    display    : inline-block;
    font-size  : 13px;
    outline    : 0;
    transition : all 0.3s linear;
    }
.pzentrumlist li a {
    color       : #222;
    display     : block;
    font-weight : normal;
    padding     : 10px 45px 10px 45px;
    }
.pzentrumlist li img {
    display        : inline-block;
    margin         : -3px 5px 0 0;
    vertical-align : middle;
    width          : 16px;
    }
.pzentrumlist li span {
    display        : inline-block;
    font-size      : 11px;
    margin-top     : -4px;
    vertical-align : middle;
    }
.pzentrumlist li:hover {
    border-top : 3px solid #333;
    }
.pzentrumlist li.select {
    border-top : 3px solid #333;
    }
.plistin {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.plistin li {
    border-bottom  : 1px dashed #ddd;
    margin-bottom  : 10px;
    padding-bottom : 10px;
    position       : relative;
    }
.plistin li:last-child {
    border-bottom : 0;
    }
.plistin li span {
    display        : inline-block;
    margin-right   : 10px;
    vertical-align : middle;
    }
.plistin li span:nth-child(2) {
    width : 100px;
    }
.plistin li span:nth-child(3) {
    margin-right : 0;
    text-align   : right;
    }
.pinh3 {
    border-bottom  : 1px solid #222;
    margin         : 0 0 10px 0;
    padding-bottom : 5px;
    }
.pzentable {
    border  : 1px solid #ddd;
    padding : 10px;
    width   : 100%;
    }
.pzentable td {
    vertical-align : top;
    }
.pzentable td:first-child {
    width : 23%;
    }
.pzentable td:last-child {
    padding-left : 40px;
    }
.pzenintable td:first-child {
    width : 45%;
    }
.pzenintable td {
    padding        : 10px 10px 10px 0;
    vertical-align : middle;
    }
.pinh2 {
    border-bottom  : 1px dashed #222;
    padding-bottom : 5px;
    }
.outerajx {
    position : relative;
    }
#tsearchload {
    display  : none;
    left     : 340px;
    position : absolute;
    top      : 9px;
    }
.pzent {
    background    : #ddd;
    border-radius : 4px;
    color         : #222 !important;
    display       : block;
    margin-bottom : 20px;
    padding       : 5px;
    text-align    : center;
    }
.commaster {
    border-bottom : 2px solid #ababab;
    width         : 100%;
    }
.commaster th {
    background    : linear-gradient(to top, #222, #2c2b2b);
    border-bottom : 3px solid darkorange;
    color         : #fff;
    font-size     : 12px;
    font-weight   : normal;
    padding       : 10px;
    text-shadow   : 0 1px 1px black;
    }
.commaster th:first-child {
    border-top-left-radius : 4px !important;
    }
.commaster th:last-child {
    border-top-right-radius : 4px !important;
    }
.commaster td:first-child {
    border-left : 0;
    }
.commaster td {
    background     : #fff;
    border-bottom  : 1px solid #e0e0e0;
    border-left    : 1px solid #e0e0e0;
    border-top     : 1px solid #ffffff;
    padding        : 10px;
    transition     : background 0.3s linear;
    vertical-align : middle;
    }
.commaster.server td {
    padding : 10px 10px;
    }
.commaster.arcadeout td {
    text-shadow : 0 1px 1px #fff;
    }
.commaster:not(.nohover) tr:hover td {
    background : #f2f2f2
    }
.nohover {
    background  : #fafafa !important;
    padding     : 0 !important;
    text-shadow : 0 0 0 !important;
    }
.nohover .dblinks {
    margin-bottom : 11px;
    }
.xcommaster {
    border-bottom : 2px solid #ababab;
    display       : table;
    table-layout  : fixed;
    width         : 100%;
    }
.xcommaster .row.head {
    background    : linear-gradient(to top, #222, #2c2b2b);
    border-bottom : 3px solid darkorange;
    border-radius : 4px 4px 0 0;
    color         : white;
    font-size     : 13px;
    font-weight   : normal;
    margin        : 0;
    padding       : 10px;
    position      : relative;
    text-align    : left;
    text-shadow   : 0 1px 1px black;
    }
.xcommaster .row.head .cell {
    background    : none;
    border        : 0;
    border-bottom : 3px solid darkorange;
    }
.xcommaster .row.head .cell:first-child {
    border-radius : 4px 0 0 0;
    }
.xcommaster .row.head .cell:last-child {
    border-radius : 0 4px 0 0;
    }
.xcommaster .row {
    display : table-row;
    }
.xcommaster .row .cell {
    background     : white;
    border-left    : 1px solid #e0e0e0;
    border-right   : 1px solid #e0e0e0;
    border-top     : 1px solid #e0e0e0;
    display        : table-cell;
    padding        : 9px;
    vertical-align : middle;
    }
.xcommaster .row .cell:first-child {
    border-left  : none;
    border-right : none;
    }
.xcommaster .row .cell:last-child {
    border-left  : none;
    border-right : none;
    }
.xcommaster .row .cell.center {
    text-align : center;
    }
.xcommaster .row:not(.head):hover > .cell {
    background : #f2f2f2;
    transition : background 0.3s linear;
    }
#logactions {
    float      : right;
    list-style : none;
    margin     : 0 0 10px 0;
    padding    : 0;
    position   : relative;
    text-align : right;
    }
#logactions li {
    display      : inline-block;
    margin-right : 2px;
    }
#logactions li button, #logactions li input {
    padding : 4px;
    }
#logactions li.seloptions {
    display : none;
    }
.shopnowtitle {
    display         : block;
    margin-bottom   : 5px;
    text-decoration : underline;
    }
#nsearchload {
    display  : none;
    position : absolute;
    right    : 10px;
    top      : 9px;
    }
@keyframes rainbow-text {
    0% {
        color : #e87d7d;
        }
    2% {
        color : #e88a7d;
        }
    4% {
        color : #e8977d;
        }
    6% {
        color : #e8a47d;
        }
    8% {
        color : #e8b07d;
        }
    10% {
        color : #e8bd7d;
        }
    12% {
        color : #e8ca7d;
        }
    14% {
        color : #e8d77d;
        }
    16% {
        color : #e8e47d;
        }
    18% {
        color : #dfe87d;
        }
    20% {
        color : #d3e87d;
        }
    22% {
        color : #c6e87d;
        }
    24% {
        color : #b9e87d;
        }
    26% {
        color : #ace87d;
        }
    28% {
        color : #9fe87d;
        }
    30% {
        color : #92e87d;
        }
    32% {
        color : #86e87d;
        }
    34% {
        color : #7de881;
        }
    36% {
        color : #7de88e;
        }
    38% {
        color : #7de89b;
        }
    40% {
        color : #7de8a8;
        }
    42% {
        color : #7de8b5;
        }
    44% {
        color : #7de8c1;
        }
    46% {
        color : #7de8ce;
        }
    48% {
        color : #7de8db;
        }
    50% {
        color : #7de8e8;
        }
    52% {
        color : #7ddbe8;
        }
    54% {
        color : #7dcee8;
        }
    56% {
        color : #7dc1e8;
        }
    58% {
        color : #7db5e8;
        }
    60% {
        color : #7da8e8;
        }
    62% {
        color : #7d9be8;
        }
    64% {
        color : #7d8ee8;
        }
    66% {
        color : #7d81e8;
        }
    68% {
        color : #867de8;
        }
    70% {
        color : #927de8;
        }
    72% {
        color : #9f7de8;
        }
    74% {
        color : #ac7de8;
        }
    76% {
        color : #b97de8;
        }
    78% {
        color : #c67de8;
        }
    80% {
        color : #d37de8;
        }
    82% {
        color : #df7de8;
        }
    84% {
        color : #e87de4;
        }
    86% {
        color : #e87dd7;
        }
    88% {
        color : #e87dca;
        }
    90% {
        color : #e87dbd;
        }
    92% {
        color : #e87db0;
        }
    94% {
        color : #e87da4;
        }
    96% {
        color : #e87d97;
        }
    98% {
        color : #e87d8a;
        }
    100% {
        color : #e87d7d;
        }
    }
@keyframes betterrainbow {
    0% {
        color : orange;
        }
    10% {
        color : purple;
        }
    20% {
        color : red;
        }
    30% {
        color : CadetBlue;
        }
    40% {
        color : yellow;
        }
    50% {
        color : coral;
        }
    60% {
        color : green;
        }
    70% {
        color : cyan;
        }
    80% {
        color : DeepPink;
        }
    90% {
        color : DodgerBlue;
        }
    100% {
        color : orange;
        }
    }
@keyframes rainbow {
    0% {
        color : #ff0000;
        }
    10% {
        color : #ff8000;
        }
    20% {
        color : #ffff00;
        }
    30% {
        color : #80ff00;
        }
    40% {
        color : #00ff00;
        }
    50% {
        color : #00ff80;
        }
    60% {
        color : #00ffff;
        }
    70% {
        color : #0080ff;
        }
    80% {
        color : #0000ff;
        }
    90% {
        color : #8000ff;
        }
    100% {
        color : #ff0080;
        }
    }
@keyframes glow {
    from {
        text-shadow : 0 0 1px #f, 0 0 2px var(--c, yellow), 0 0 3px var(--c, yellow), 0 0 4px var(--c, yellow), 0 0 5px var(--c, yellow), 0 0 6px var(--c, yellow), 0 0 7px var(--c, yellow);
        }
    to {
        text-shadow : 0 0 2px var(--c, yellow), 0 0 3px var(--c, yellow), 0 0 4px var(--c, yellow), 0 0 5px var(--c, yellow), 0 0 6px var(--c, yellow), 0 0 7px var(--c, yellow), 0 0 8px var(--c, yellow);
        }
    }
.dchars {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.dchars li {
    border        : 1px solid #ddd;
    border-radius : 4px;
    display       : inline-block;
    margin        : 5px;
    overflow      : hidden;
    padding       : 10px;
    text-align    : center;
    width         : 300px;
    }
.dchars li h3 {
    background : #ddd;
    margin     : 0;
    padding    : 6px;
    }
.dchars li span {
    display : block;
    margin  : 5px 0 5px 0;
    }
.dchars li span:last-child {
    display : block;
    margin  : 5px 0 0 0;
    }
a.outeratemp, .outeratemp {
    color       : white;
    display     : inline-block;
    font-weight : normal;
    margin      : 5px;
    opacity     : .7;
    transition  : all 0.3s linear;
    }
.outeratemp:hover {
    opacity : 1;
    }
.outeratemp.dis {
    opacity : .2;
    }
.atemps {
    height   : 150px;
    overflow : hidden;
    position : relative;
    width    : 150px;
    }
.atemps .bpic {
    height   : 100%;
    left     : 0;
    position : absolute;
    top      : 0;
    width    : 100%;
    }
.atemps .avname {
    bottom         : 17px;
    color          : white;
    display        : block;
    font-family    : 'colors_of_autumnregular', sans-serif;
    font-size      : 8px;
    font-weight    : bold;
    letter-spacing : 0.1em;
    position       : absolute;
    right          : 10px;
    text-shadow    : -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    transform      : rotate(-33deg);
    width          : 60px;
    }
.atemps .gapic {
    bottom   : 2px;
    position : absolute;
    right    : 5px;
    width    : 26%;
    }
.atempso {
    cursor   : pointer;
    height   : 250px;
    overflow : hidden;
    position : relative;
    width    : 250px;
    }
.atempso .bpic {
    height   : 100%;
    left     : 0;
    position : absolute;
    top      : 0;
    width    : 100%;
    }
.atempso .avname {
    bottom         : 32px;
    color          : white;
    display        : block;
    font-family    : 'colors_of_autumnregular', sans-serif;
    font-size      : 12px;
    font-weight    : bold;
    letter-spacing : 0.1em;
    position       : absolute;
    right          : 12px;
    text-shadow    : -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    transform      : rotate(-33deg);
    width          : 120px;
    }
.atempso .gapic {
    bottom   : 2px;
    position : absolute;
    right    : 5px;
    width    : 30%;
    }
.teamra {
    overflow : hidden;
    position : relative;
    }
.teamra .trahmen {
    height   : 100%;
    left     : 0;
    position : absolute;
    top      : 0;
    width    : 100%;
    z-index  : 99;
    }
.teamra .tava {
    height   : 100%;
    left     : 0;
    position : absolute;
    top      : 0;
    width    : 100%;
    z-index  : 95;
    }
.teamra .tgam {
    bottom   : 15px;
    position : absolute;
    right    : 6px;
    width    : 25%;
    z-index  : 101;
    }
.teamra .tnam {
    bottom         : 24px;
    color          : white;
    font-family    : 'colors_of_autumnregular', sans-serif;
    font-size      : 14px;
    font-weight    : bold;
    letter-spacing : 0.1em;
    position       : absolute;
    right          : 0;
    text-align     : center;
    text-shadow    : -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    transform      : rotate(-20deg);
    width          : 140px;
    z-index        : 101;
    }
h2.pspon {
    border-bottom  : 3px dashed #ddd;
    padding-bottom : 10px;
    }
#pspon {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
#pspon li {
    border-bottom  : 1px solid #ddd;
    margin-bottom  : 20px;
    padding-bottom : 20px;
    }
#pspon li div {
    display        : inline-block;
    text-align     : center;
    vertical-align : middle;
    width          : 350px;
    }
#pspon li div img {
    max-width : 250px;
    }
#pspon li div span {
    display     : block;
    font-weight : bold;
    }
#pspon li div + div {
    line-height : 22px;
    text-align  : left;
    width       : 400px;
    }
#shadowmask {
    background : #000000;
    bottom     : 0;
    height     : 100%;
    left       : 0;
    margin     : 0;
    opacity    : 0;
    padding    : 0;
    position   : fixed;
    right      : 0;
    top        : 0;
    transition : all 0.3s linear;
    visibility : hidden;
    width      : 100%;
    z-index    : 115;
    }
#shadowmask.select {
    opacity    : .75;
    visibility : visible;
    }
#ustats {
    list-style : none;
    margin     : 0;
    padding    : 0 8px;
    position   : relative;
    }
#ustats li {
    color       : #ddd;
    display     : inline-block;
    font-size   : 13px;
    position    : relative;
    text-shadow : 0 1px 1px black;
    }
#ustats li > span {
    color       : darkorange;
    font-weight : bold;
    }
#ustats li a {
    color       : white;
    margin-left : 10px;
    transition  : all 0.3s linear;
    }
#ustats li > a:hover {
    color : darkorange;
    }
#ustats li div {
    background    : #222;
    border-bottom : 1px solid #333;
    border-left   : 1px solid #333;
    border-radius : 0 0 10px 10px;
    border-right  : 1px solid #333;
    box-shadow    : 0 10px 12px rgba(0, 0, 0, 0.6);
    display       : none;
    font-size     : 12px;
    line-height   : 20px;
    max-width     : 180px;
    min-width     : 120px;
    padding       : 10px;
    position      : absolute;
    top           : 54px;
    }
#ustats li:hover div {
    display : block;
    }
.omem {
    border-bottom : 1px solid #666;
    list-style    : none;
    margin        : 0 0 5px 0;
    padding       : 0 0 5px 0;
    }
.omem li {
    align-items     : center;
    display         : flex;
    flex-flow       : row wrap;
    font-size       : 12px;
    justify-content : space-between;
    margin          : 5px 0;
    }
.omem li * {
    margin : 0 5px;
    }
#ustats li div hr {
    border           : 0 solid #333;
    border-top-width : 1px;
    height           : 0;
    }
#rangbaus {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
#rangbaus li {
    border         : 1px solid #666;
    border-radius  : 2px;
    display        : inline-block;
    margin         : 10px;
    padding        : 2px;
    vertical-align : top;
    width          : 100px;
    }
#rangbaus li > span {
    display       : block;
    margin-bottom : 10px !important;
    }
#rangbaus li span, #rangbaus li a {
    color   : #000;
    display : block;
    margin  : 10px 0 0 0;
    }
/*Portal*/
#portalstop {
    clear      : both;
    list-style : none;
    margin     : 0 0 0 0;
    padding    : 0;
    text-align : left
    }
#portalstop li {
    align-items     : center;
    border-top      : 1px solid #ddd;
    color           : #222;
    display         : flex;
    font-size       : 13px;
    justify-content : space-between;
    padding         : 10px 5px;
    }
#portalstop li > div {
    flex : 0 80%;
    }
.br-theme-css-stars.tiere .br-widget a {
    font-size : 20px;
    }
.tiere {
    margin : -5px 0 0 -1px;
    }
#portalstop li:last-child {
    padding : 5px 5px 0 5px;
    }
.ges {
    display : inline-block;
    margin  : -5px 0 0 -1px;
    }
.br-theme-css-stars.votes .br-widget a {
    font-size : 20px !important;
    }
.votes {
    display : inline-block;
    margin  : -6px 0 0 10px;
    }
#webportals {
    list-style : none;
    margin     : 0;
    padding    : 0;
    text-align : center;
    }
#webportals li {
    -webkit-backface-visibility : hidden;
    border                      : 1px solid #ddd;
    border-radius               : 8px;
    box-shadow                  : 0 3px 6px rgba(0, 0, 0, 0.4);
    cursor                      : pointer;
    display                     : inline-block;
    height                      : 290px;
    margin                      : 10px;
    overflow                    : hidden;
    padding                     : 10px;
    text-align                  : center;
    transition                  : all 0.3s linear;
    width                       : 290px;
    }
#webportals li.noactive {
    opacity : .3;
    }
#webportals li:hover {
    box-shadow : 0 0 0;
    }
#webportals li:hover > img {
    transform : scale(1.05);
    }
#webportals li img {
    transition : all 0.3s linear;
    width      : 100%;
    }
.wbi {
    border        : 1px solid #ddd;
    border-radius : 8px;
    box-shadow    : 0 3px 6px rgba(0, 0, 0, 0.4);
    padding       : 10px;
    transition    : all 0.3s linear;
    }
.wbi:hover {
    box-shadow : 0 0 0;
    }
#catwahl {
    float    : right;
    margin   : 15px 0 0 0;
    position : relative;
    z-index  : 1000;
    }
#portalsearch {
    float  : left;
    margin : 15px 0 0 0;
    }
#portalsearch input[type=text] {
    position : relative;
    width    : 250px;
    z-index  : 1000;
    }
#portalsearch input[type=submit] {
    margin-left : 5px;
    position    : relative;
    z-index     : 1000;
    }
#ads {
    position   : absolute;
    text-align : center;
    top        : 10px;
    width      : 100%;
    }
#ads a {
    background  : #222222;
    color       : white;
    display     : inline-block;
    font-size   : 13px;
    font-weight : normal;
    height      : 12px;
    line-height : 12px;
    }
.tiercomcontainer {
    padding    : 0 15px 0 15px;
    text-align : left;
    }
.tncavatar {
    display        : inline-block;
    margin-right   : 20px;
    vertical-align : middle;
    }
.tncdets {
    display        : inline-block;
    vertical-align : middle;
    }
.tncname {
    margin : 0 0 10px 0;
    }
.tnctext {
    margin : 0 20px 0 0;
    width  : 800px;
    }
.tncline {
    border           : 0 dashed #dddddd;
    border-top-width : 1px;
    margin           : 20px 20px 20px 10px;
    }
a.mletter {
    background    : linear-gradient(to top, #ededed, #ebebeb);
    border        : #ccc 1px solid;
    border-radius : 4px;
    color         : black;
    display       : inline-block;
    margin        : 0 5px;
    padding       : 5px 8px;
    transition    : background 0.3s linear;
    }
a.mletter:hover {
    background : #333;
    color      : white;
    }
a.mletter.active {
    background : #333;
    color      : white;
    }
@keyframes scroll-left {
    0% {
        text-indent : 100%;
        }
    100% {
        text-indent : -100%;
        }
    }
#ticker_refresh {
    color       : darkorange;
    flex        : 3 auto;
    font-size   : 14px;
    font-weight : bold;
    height      : 55px;
    position    : relative;
    white-space : nowrap;
    }
#mainticker {
    box-sizing  : border-box;
    margin      : 0 auto;
    overflow    : hidden;
    white-space : nowrap;
    width       : 500px;
    }
#mainticker.disabled {
    display : none;
    }
.xpuser.disabled {
    animation : none !important;
    }
#mainticker span {
    animation    : marquee 15s linear infinite;
    display      : inline-block;
    padding-left : 100%;
    transform    : translateZ(0);
    will-change  : transform;
    }
#mainticker span:hover {
    animation-play-state : paused
    }
/* Make it move */
@keyframes marquee {
    0% {
        transform : translate(0, 0);
        }
    100% {
        transform : translate(-100%, 0);
        }
    }
#mainticker span:hover {
    animation-play-state : paused;
    }
#mainticker a {
    color : inherit;
    }
#openuser, #rst, #cst {
    position : relative;
    }
#openuser.hide:before {
    border-bottom : 15px solid rgba(0, 0, 0, .8);
    border-left   : 13px solid transparent;
    border-right  : 13px solid transparent;
    border-top    : 15px solid transparent;
    content       : '';
    height        : 0;
    position      : absolute;
    right         : 11px;
    top           : 30px;
    transition    : all 0.3s linear;
    width         : 0;
    }
#openuser.hide:after {
    background    : rgba(0, 0, 0, .8);
    border-radius : 10px;
    bottom        : -60px;
    content       : 'Hier  registrieren';
    font-size     : .53em;
    height        : 50px;
    left          : -55px;
    line-height   : 50px;
    position      : absolute;
    transition    : all 0.3s linear;
    width         : 160px;
    }
#rst.hide:before {
    border-bottom : 15px solid transparent;
    border-left   : 13px solid transparent;
    border-right  : 13px solid transparent;
    border-top    : 15px solid rgba(0, 0, 0, .8);
    content       : '';
    height        : 0;
    left          : 6px;
    position      : absolute;
    top           : -30px;
    transition    : all 0.3s linear;
    width         : 0;
    }
#rst.hide:after {
    background    : rgba(0, 0, 0, .8);
    border-radius : 10px;
    content       : 'Webradio';
    font-size     : 16px;
    height        : 50px;
    left          : -60px;
    line-height   : 50px;
    position      : absolute;
    top           : -80px;
    transition    : all 0.3s linear;
    width         : 105px;
    }
#cst.hide:before {
    border-bottom : 15px solid transparent;
    border-left   : 13px solid transparent;
    border-right  : 13px solid transparent;
    border-top    : 15px solid rgba(0, 0, 0, .8);
    content       : '';
    height        : 0;
    left          : 6px;
    position      : absolute;
    top           : -30px;
    transition    : all 0.3s linear;
    width         : 0;
    }
#cst.hide:after {
    background    : rgba(0, 0, 0, .8);
    border-radius : 10px;
    content       : 'Com-Chat';
    font-size     : 16px;
    height        : 50px;
    left          : -10px;
    line-height   : 50px;
    position      : absolute;
    top           : -80px;
    transition    : all 0.3s linear;
    width         : 105px;
    }
#cst span {
    bottom      : 5px;
    color       : darkorange;
    font-size   : .4em;
    font-style  : normal;
    font-weight : bold;
    left        : 41px;
    position    : absolute;
    text-shadow : 0 1px 1px black;
    }
.boxline {
    list-style : none;
    margin     : 0;
    padding    : 0;
    text-align : left;
    }
.boxline .lineup {
    align-items     : center;
    background      : #fafafa;
    display         : flex;
    justify-content : space-between;
    margin-bottom   : 3px;
    padding         : 5px 10px;
    text-shadow     : 0 1px 1px white;
    }
.boxline .linedown {
    background    : #eee;
    margin-bottom : 3px;
    padding       : 7px 10px 7px 0;
    text-shadow   : 0 1px 1px white;
    }
.boxline .linedown img {
    display        : inline-block;
    vertical-align : middle;
    }
.boxline li:last-child {
    margin-bottom : 0;
    }
.boxline .linedown div {
    display        : inline-block;
    margin-right   : 10px;
    padding-left   : 10px;
    vertical-align : middle;
    }
.boxline .linedown div + div {
    margin-right : 0;
    padding-left : 0;
    position     : relative;
    }
.boxline .linedown div + div:before {
    content    : '[';
    left       : 0;
    opacity    : 0;
    position   : absolute;
    top        : 0;
    transform  : translateX(0);
    transition : all 0.3s linear;
    }
.boxline .linedown div + div:after {
    content    : ']';
    opacity    : 0;
    position   : absolute;
    right      : 0;
    top        : 0;
    transform  : translateX(0);
    transition : all 0.3s linear;
    }
.boxline .linedown div + div:hover:before {
    opacity   : 1;
    transform : translateX(-10px)
    }
.boxline .linedown div + div:hover:after {
    opacity   : 1;
    transform : translateX(10px);
    }
@keyframes fadeIn {
    from {
        opacity : 0;
        }
    to {
        opacity : 1;
        }
    }
.ui-tooltip {
    background    : linear-gradient(to bottom, #aaa, #eee) !important;
    border        : 2px solid darkorange !important;
    border-radius : 4px;
    color         : #333 !important;
    text-shadow   : 0 1px 1px rgba(255, 255, 255, 0.5) !important;
    }
.tippy-tooltip.dark-theme {
    background    : linear-gradient(to bottom, #aaa, #eee) !important;
    border        : 2px solid darkorange !important;
    border-radius : 4px;
    box-shadow    : 0 0 12px rgba(0, 0, 0, 0.6);
    color         : #333 !important;
    font-size     : 12px;
    text-align    : left;
    text-shadow   : 0 1px 1px rgba(255, 255, 255, 0.5) !important;
    will-change   : auto;
    }
.tippy-roundarrow {
    fill : darkorange;
    }
.tippy-popper[x-placement^='top'] .tippy-tooltip.dark-theme .tippy-arrow {
    border-top-color : darkorange;
    }
.tippy-popper[x-placement^='bottom'] .tippy-tooltip.dark-theme .tippy-arrow {
    border-bottom-color : darkorange;
    }
.tippy-popper[x-placement^='left'] .tippy-tooltip.dark-theme .tippy-arrow {
    border-left-color : darkorange;
    }
.tippy-popper[x-placement^='right'] .tippy-tooltip.dark-theme .tippy-arrow {
    border-right-color : darkorange;
    }
.tip:before {
    border-bottom : 11px solid #551832;
    border-left   : 11px solid transparent;
    border-right  : 0 solid transparent;
    border-top    : 11px solid transparent;
    content       : '';
    height        : 0;
    position      : absolute;
    right         : 5px;
    top           : -22px;
    width         : 0;
    }
.tip {
    background    : linear-gradient(to bottom, #aaa, #eee);
    border        : 2px solid darkorange;
    border-radius : 4px;
    box-shadow    : 0 0 12px rgba(0, 0, 0, 0.6);
    color         : #333;
    display       : none;
    font-size     : 12px;
    font-style    : normal;
    font-weight   : normal;
    min-width     : 100px;
    padding       : 10px;
    position      : absolute;
    right         : 90%;
    text-shadow   : 0 1px 1px rgba(255, 255, 255, 0.5);
    top           : 25px;
    z-index       : 1000;
    }
.tip * {
    white-space : nowrap
    }
.tip.right:before {
    border-left  : 0 solid transparent;
    border-right : 11px solid transparent;
    left         : 5px;
    }
.tip.right {
    left : 90%;
    }
.tip.bottom {
    max-width   : 350px;
    top         : 100%;
    white-space : nowrap;
    }
.showtip {
    position : relative;
    }
.showtip:hover > .tip {
    animation : fadeIn .7s;
    display   : block;
    }
#selectlogs {
    font-size   : 12px;
    font-weight : normal;
    position    : absolute;
    right       : 0;
    top         : -8px;
    }
#selectlogs form {
    display     : inline-block;
    margin-left : 5px;
    }
.xchatcontainer {
    background    : white;
    border-radius : 4px 4px 0 0;
    bottom        : 0;
    box-shadow    : 0 1px 4px rgba(0, 0, 0, .6);
    overflow      : hidden;
    padding       : 10px 10px 42px 10px;
    position      : fixed;
    right         : 10px;
    width         : 250px;
    z-index       : 10000;
    }
.cke_chrome {
    box-shadow : none !important;
    }
.cke_button_label {
    text-shadow : none !important;
    }
.xchatcontainer .cke_chrome {
    border     : 1px solid #b6b6b6;
    box-shadow : 0 0 0;
    display    : block;
    padding    : 0;
    position   : absolute;
    top        : 0;
    }
.xchatcontainer .cke_bottom {
    background : none;
    border     : none;
    padding    : 0;
    position   : absolute;
    top        : 60px;
    }
.xchatcontainer .cke_toolgroup {
    float  : left;
    margin : 0 6px 5px 0;
    }
.xchatcontainer h2 {
    background  : darkorange;
    color       : white;
    font-size   : 1em;
    margin      : 0 0 10px 0;
    padding     : 10px;
    position    : relative;
    text-shadow : 0 1px 1px black;
    transition  : background 0.3s linear;
    }
.xchatcontainer h2 .xchatclose {
    cursor      : pointer;
    height      : 30px;
    line-height : 30px;
    position    : absolute;
    right       : 6px;
    text-align  : center;
    top         : 2px;
    width       : 30px;
    }
.xchatcontainer h2 .xchatsettings {
    cursor      : pointer;
    height      : 30px;
    line-height : 30px;
    position    : absolute;
    right       : 30px;
    text-align  : center;
    top         : 2px;
    width       : 30px;
    }
.xchatcontainer .xmessages {
    height    : 200px;
    overflow  : hidden;
    word-wrap : break-word;
    }
.xchatcontainer .xmessages img {
    max-width : 100px;
    }
.xchatcontainer textarea {
    margin-top : 10px;
    outline    : none;
    resize     : none;
    width      : 86%;
    }
.xchatcontainer .xmessenger_icons {
    list-style : none;
    margin     : 0;
    padding    : 2px 0 0 0;
    }
.xchatcontainer .xmessenger_icons {
    display   : inline-block;
    font-size : 16px;
    opacity   : .6
    }
.xchatform {
    height     : 50px;
    margin-top : 10px;
    position   : relative;
    }
.xchatsub {
    background : linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%) !important;
    border     : 1px solid #b6b6b6 !important;
    height     : 57px;
    position   : absolute;
    right      : 0;
    top        : 0;
    width      : 30px;
    }
input.xchatsub {
    color : #222 !important;
    }
.xchatsub:active {
    background : linear-gradient(to top, #ffffff 0%, #e5e5e5 100%) !important;
    }
.xmdel {
    cursor  : pointer;
    display : none;
    margin  : 0 5px;
    }
.xchatcontainer .xmessages ul {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.xchatcontainer .xmessages ul li {
    align-items : center;
    display     : flex;
    }
.xchatcontainer .xmessages ul li:hover > .xmdel {
    display : block;
    }
.xchatcontainer .xmessages ul li span img {
    border-radius : 100% !important;
    }
.xchatcontainer .xmessages ul li p {
    background    : #eee;
    border-radius : 8px;
    font-size     : 12px;
    max-width     : 155px;
    padding       : 6px;
    }
.xchatcontainer .xmessages ul li.xmleft span img {
    margin-right : 5px;
    }
.xchatcontainer .xmessages ul li p {
    position   : relative;
    text-align : center;
    }
.xchatcontainer .xmessages ul li.xmright span img {
    margin-left : 5px;
    }
.xchatcontainer .xmessages ul li.xmleft {
    clear : both;
    float : left;
    }
.xchatcontainer .xmessages ul li.xmright {
    clear : both;
    float : right;
    }
.xchatcontainer.select {
    padding : 0;
    width   : 100px;
    }
.xchatcontainer h2.select {
    font-size : 10px;
    margin    : 0;
    }
.xchatcontainer h2.select .xchatclose {
    height : 0;
    top    : -6px;
    width  : auto;
    }
.xchatcontainer h2.select .xchatsettings {
    display : none;
    }
.xchatcontainer .xchatform.select {
    display : none;
    }
.xchatcontainer .xmessages.select {
    height : 0;
    }
.xchatcontainer textarea.select {
    display : none;
    }
.xchatsub.select {
    display : none;
    }
.xchatcontainer h2.select.active {
    background : #666 !important;
    }
.xchatcontainer h2.active {
    background : #666 !important;
    }
/* Messenger Big */
.messengerin {
    display : flex;
    }
.messengerin .mcontacts {
    background      : white;
    border-left     : 1px solid #ddd;
    flex            : 1 1 22%;
    justify-content : center;
    padding         : 15px;
    }
.messengerin .mcontacts > input {
    border-bottom : 1px solid #ddd;
    margin-bottom : 10px;
    width         : 100%;:
    }
.messengerin .mcontacts #contscroller, .messengerin .mcontacts #allcontscroller {
    height   : 515px;
    overflow : hidden;
    }
.messengerin .mcontacts #allcontscroller {
    display  : none;
    height   : 515px;
    overflow : hidden;
    }
.messengerin .mcontacts ul {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.messengerin .mcontacts ul li {
    align-items   : center;
    border-bottom : 1px solid #eee;
    box-sizing    : border-box;
    cursor        : pointer;
    display       : flex;
    padding       : 5px;
    position      : relative;
    user-select   : none;
    }
.messengerin .mcontacts ul li div span {
    color : #999;
    }
.xmread {
    bottom   : 10px;
    color    : #ddd;
    position : absolute;
    right    : 5px;
    }
.xmdelete {
    bottom   : 10px;
    display  : none;
    position : absolute;
    right    : 5px;
    }
.messengerin .mcontacts ul li:hover {
    background : #eee;
    }
.messengerin .mcontacts ul li:hover .xmread {
    display : none;
    }
.messengerin .mcontacts ul li:hover .xmdelete {
    display : block;
    }
.messengerin .mcontacts ul li.select {
    background : #eee;
    }
.messengerin .mcontacts ul li > a img {
    border-radius : 100% !important;
    }
.messengerin .mcontacts ul li > * {
    margin-right : 10px;
    }
.messengerin .mcontacts ul li span {
    color       : rgba(153, 153, 153, 1);
    display     : block;
    margin-top  : 5px;
    overflow    : hidden;
    position    : relative;
    white-space : nowrap;
    }
.messengerin .mmessage {
    background   : white;
    border-left  : 1px solid #ddd;
    border-right : 1px solid #ddd;
    flex         : 10 1 50%;
    position     : relative;
    }
#emptyxmsg {
    left      : 50%;
    position  : absolute;
    top       : 50%;
    transform : translate(-50%, -50%);
    }
.messengerin .mmessage {
    padding : 15px;
    }
.mmessage .cke_chrome {
    border     : 1px solid #b6b6b6;
    box-shadow : 0 0 0;
    display    : block;
    padding    : 0;
    position   : absolute;
    top        : 0;
    }
.mmessage .cke_bottom {
    background : none;
    border     : none;
    padding    : 0;
    position   : absolute;
    top        : 60px;
    }
.mmessage .cke_toolgroup {
    float  : left;
    margin : 0 6px 5px 0;
    }
.messengerin .mmessage > div {
    height   : 413px;
    overflow : hidden;
    }
.messengerin .mmessage > h2 {
    align-items     : center;
    border-bottom   : 1px solid #ddd;
    display         : flex;
    font-size       : 14px;
    justify-content : flex-end;
    margin          : 0 0 10px 0;
    padding-bottom  : 10px;
    }
.messengerin .mmessage > h2 > * {
    margin : 0 5px;
    }
.messengerin .mmessage > h2 > div {
    text-align : right;
    }
.messengerin .mmessage > h2 > div > span {
    color       : grey;
    display     : block;
    font-size   : 11px;
    font-weight : normal;
    }
.messengerin .mmessage ul {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.messengerin .mmessage ul li {
    align-items : center;
    display     : flex;
    }
.messengerin .mmessage ul li:hover > .xmdel {
    display : block;
    }
.messengerin .mmessage ul li span img {
    border-radius : 100% !important;
    }
.messengerin .mmessage ul li p {
    background    : #eee;
    border-radius : 8px;
    font-size     : 12px;
    max-width     : 400px;
    padding       : 6px;
    word-wrap     : break-word;
    }
.messengerin .mmessage ul li.xmleft span img {
    margin-right : 5px;
    }
.messengerin .mmessage ul li p {
    text-align : center;
    }
.messengerin .mmessage ul li.xmright span img {
    margin-left : 5px;
    }
.messengerin .mmessage ul li.xmleft {
    clear : both;
    float : left;
    }
.messengerin .mmessage ul li.xmright {
    clear : both;
    float : right;
    }
#xsearchul {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
#xsearchul li {
    margin   : 20px 10px;
    padding  : 5px 10px;
    position : relative;
    }
#xsearchul li h3 {
    border-bottom : 1px solid #ccc;
    color         : #666;
    display       : flex;
    font-size     : 13px;
    margin        : 0 0 5px 0;
    padding       : 0 0 3px 0;
    }
#xsearchul li h3 > * {
    margin-right : 5px;
    }
#xsearchul li h3 > *:nth-child(2) {
    flex : 1;
    }
#xsearchul li h3 > *:nth-child(3) {
    color     : #666;
    font-size : 11px;
    }
#xsearchbar {
    border-bottom : 1px solid #ccc;
    list-style    : none;
    margin        : 5px 0;
    padding       : 0 0 15px 0;
    }
#xsearchbar li {
    display : inline-block;
    }
#xsearchbar li > a {
    align-items : center;
    display     : flex;
    text-shadow : 0 1px 1px black;
    }
#xsearchbar li > a > span {
    font-size   : 11px;
    font-weight : bold;
    margin-left : 5px;
    }
.wdstyle {
    background    : #fafafa;
    border        : #ccc 1px solid;
    border-radius : 3px;
    box-shadow    : 0 1px 2px #d1d1d1;
    color         : #666;
    font-size     : 13px;
    margin        : 0 auto;
    padding       : 10px;
    position      : relative;
    text-align    : center;
    text-shadow   : 1px 1px 0 #fff;
    width         : 50%;
    }
.wdstyle h3 {
    margin : 0;
    }
.wdstyle p {
    line-height : 20px;
    }
.wdstyle a {
    display     : block;
    font-weight : bold;
    }
.xarcadeimg {
    border-radius : 2px;
    box-shadow    : 0 1px 2px rgba(0, 0, 0, .6);
    }
.xarcngames {
    display    : flex;
    flex-flow  : row wrap;
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.xarcngames li {
    backface-visibility : hidden;
    display             : inline-block;
    flex                : 1;
    height              : 50px;
    margin              : 5px;
    position            : relative;
    vertical-align      : top;
    width               : 50px;
    }
.xarcnlist {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.xarcnlist li:first-child {
    padding : 0 10px 10px 0;
    }
.xarcnlist li:first-child > span {
    background : none;
    margin     : 0;
    padding    : 0;
    width      : 66px;
    }
.xarcnlist li:first-child > *:nth-child(1) {
    flex : 1 100%;
    }
.xarcnlist li {
    align-items   : center;
    border-bottom : 1px solid #ddd;
    box-sizing    : border-box;
    display       : flex;
    padding       : 5px 0;
    text-align    : left;
    }
.xarcnlist li > *:nth-child(2) {
    flex : 1 auto;
    }
.xarcnlist li img {
    border-radius   : 100% !important;
    image-rendering : crisp-edges;
    margin-right    : 10px;
    transition      : all 0.3s linear;
    }
.xarcnlist li span {
    display     : block;
    float       : right;
    font-weight : bold;
    padding     : 5px;
    text-align  : center;
    width       : 66px;
    }
.xarcnlist li:last-child {
    border-bottom  : 0;
    margin         : 0;
    padding-bottom : 0;
    }
.xarcnlist li a:hover > img {
    filter : grayscale(0);
    }
#endecr {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.xarcnalist {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.xarcnalist li {
    align-items   : center;
    border-bottom : 1px solid #ddd;
    display       : flex;
    padding       : 5px 10px 7px 10px;
    }
.xarcnalist li img {
    margin-right : 5px;
    }
.xarcnalist li > * {
    margin-right : 5px;
    }
.xarcnalist li:last-child {
    border-bottom  : 0;
    padding-bottom : 0;
    }
.xarcnalist li img {
    border        : 2px solid #ccc !important;
    border-radius : 100% !important;
    box-shadow    : 0 3px 6px rgba(0, 0, 0, 0.4);
    filter        : grayscale(100%);
    transition    : all 0.3s linear;
    }
.xarcnalist li a:hover > img {
    filter : grayscale(0);
    }
#endecr li {
    display        : inline-block;
    margin         : 0 10px;
    vertical-align : top;
    width          : 45%;
    }
#endecr li h2 {
    margin : 0 0 10px 0;
    }
.startboxes {
    background    : #fff;
    border-radius : 4px 4px 0 0;
    box-sizing    : border-box;
    margin-bottom : 20px;
    padding       : 0;
    text-align    : center;
    }
.startboxes.img span > img {
    max-width : 450px;
    width     : 100%;
    }
.startboxes.shoutbox {
    text-align : left;
    }
.startboxes.resetcounter h3 {
    text-align : center;
    }
.startboxes h3 {
    background    : linear-gradient(to top, #222, #2c2b2b);
    border-bottom : 3px solid orange;
    border-radius : 4px 4px 0 0;
    color         : white;
    font-size     : 13px;
    font-weight   : normal;
    margin        : 0;
    padding       : 10px;
    position      : relative;
    text-align    : left;
    text-shadow   : 0 1px 1px black;
    }
.startboxes.slider h3 {
    text-align : center;
    }
.startboxes h3 a {
    color       : white;
    text-shadow : 0 1px 1px black;
    transition  : all 0.2s linear;
    }
.startboxes h3 a:hover {
    color : darkorange;
    }
.startboxes h3 img {
    cursor   : pointer;
    position : absolute;
    right    : 10px;
    top      : 10px;
    }
#chatpopout {
    cursor   : pointer;
    position : absolute;
    right    : 40px;
    top      : 10px;
    }
.startboxes > span {
    border-bottom : 2px solid #ababab;
    display       : block;
    padding       : 10px;
    }
.startboxes.slider > span {
    padding : 0 10px;
    }
#showchatbox {
    border-bottom : 2px solid #ababab;
    display       : block;
    height        : 250px;
    padding       : 10px;
    position      : relative;
    }
.chatemoji {
    font-size : 20px;
    }
#showchatbox.shadow {
    z-index : 116;
    }
#shout {
    box-sizing : border-box;
    height     : calc(100% - 39px);
    overflow   : hidden;
    }
#shoutboxtext {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
#shoutform {
    background : white;
    border-top : 1px solid #ddd;
    bottom     : 15px;
    box-shadow : 0 -10px 10px rgba(0, 0, 0, 0.04);
    box-sizing : border-box;
    display    : flex;
    height     : 23px;
    left       : 0;
    padding    : 5px 5px 0 5px;
    position   : absolute;
    width      : 100%;
    z-index    : 103;
    }
#shoutform .cke_chrome {
    border     : 1px solid #b6b6b6;
    box-shadow : 0 0 0;
    display    : block;
    height     : 24px;
    padding    : 0;
    top        : 5px;
    }
#shoutform .cke_bottom {
    background : none;
    border     : none;
    display    : none;
    left       : -1px;
    padding    : 0;
    position   : absolute;
    top        : 33px;
    }
#shoutform .cke_toolgroup {
    float  : left;
    margin : 0 6px 5px 0;
    }
#shoutform > ul {
    align-items : center;
    display     : flex;
    left        : 310px;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    position    : absolute;
    top         : 3px;
    }
#shoutform > ul li {
    margin : 0 2px;
    }
#shoutform #showcode.select {
    background : darkorange;
    color      : white;
    }
.archiv#shoutboxtext {
    padding : 0 10px;
    }
#sharchiv {
    padding  : 0 5px;
    position : absolute;
    right    : 5px;
    top      : 5px;
    }
#showarchiv {
    display : none !important;
    }
#shfirstsend {
    display     : none;
    height      : 26px;
    margin-left : 5px;
    }
#shoutboxtext li {
    align-items     : center;
    background      : rgba(222, 222, 222, 0.5);
    border-radius   : 6px;
    display         : flex;
    font-size       : 11px;
    justify-content : space-between;
    margin          : 2px 0;
    padding         : 0 4px;
    position        : relative;
    }
#shoutboxtext li a {
    font-size : 11px;
    }
.archiv#shoutboxtext li {
    background : #f2f2f2;
    padding    : 10px;
    }
#shoutboxtext li > * {
    margin-left : 5px;
    padding     : 1px 0;
    }
#shoutboxtext li .delchats {
    color     : darkorange;
    font-size : 15px;
    }
#shoutboxtext li .shav {
    margin  : 0 5px 0 0;
    padding : 0;
    }
#shoutboxtext li .shouttime {
    font-size : 9px;
    }
.archiv#shoutboxtext li .shouttime {
    right : 50px;
    }
#shoutboxtext li .shouttext {
    align-items : center;
    display     : flex;
    flex        : 1 0 0;
    flex-flow   : row wrap;
    word-break  : break-all;
    }
#shoutboxtext li .shouttext > * {
    margin-right : 5px;
    }
#shoutboxtext li .shouttext a {
    font-weight : bold;
    }
#shoutboxtext li .shouttext a:last-child {
    margin-left : 5px;
    }
#shoutboxtext li .shouttext img {
    margin : 0 5px;
    }
#chatback {
    position : relative;
    }
.ogamesul {
    display         : flex;
    flex-flow       : row wrap;
    justify-content : space-between;
    list-style      : none;
    margin          : 0;
    padding         : 0;
    }
.emoausgabe {
    padding : 10px 0;
    }
.ogamesul li {
    margin : 5px;
    }
#cformtable {
    display         : flex;
    justify-content : center;
    }
#cformtable input, #cformtable select, #cformtable textarea {
    width : 400px;
    }
#chatbox_nav {
    display   : none;
    font-size : 20px;
    margin    : 4px 10px;
    position  : absolute;
    right     : 5px;
    }
/*****************************************************
Notifications
*****************************************************/
.xnoticontent {
    align-items : flex-start;
    display     : flex;
    flex-flow   : row wrap;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    }
.xnoticontent > *:first-child {
    flex         : 1;
    margin-right : 30px;
    }
.xnoticontent > *:last-child {
    flex : 3;
    }
.xnoticontent > *:last-child > h2 {
    border-bottom  : 1px dashed #222;
    font-size      : 14px;
    margin-top     : 0;
    padding-bottom : 5px;
    position       : relative;
    }
/*****************************************************
XShop
*****************************************************/
.xshopartikel {
    display         : flex;
    flex-flow       : row wrap;
    justify-content : center;
    list-style      : none;
    margin          : 0;
    padding         : 0;
    }
.xshopartikel.shopin {
    justify-content : flex-start;
    }
.xshopartikel > * {
    background      : white;
    border          : 1px solid #ccc;
    border-radius   : 4px;
    box-shadow      : 0 1px 2px #d1d1d1;
    box-sizing      : border-box;
    color           : #222;
    display         : flex;
    flex-flow       : column;
    justify-content : space-between;
    margin          : 10px;
    padding         : 15px 10px;
    position        : relative;
    text-align      : center;
    transition      : all 0.2s linear;
    user-select     : none;
    width           : 190px;
    }
.xshopartikel.shopin > * {
    background      : white;
    border          : 1px solid #ccc;
    border-radius   : 4px;
    box-shadow      : 0 1px 2px #d1d1d1;
    box-sizing      : border-box;
    color           : #222;
    display         : flex;
    flex-flow       : column;
    justify-content : space-between;
    margin          : 5px;
    padding         : 15px 10px;
    position        : relative;
    text-align      : center;
    transition      : all 0.2s linear;
    user-select     : none;
    width           : 180px;
    }
.xshopartikel > *:hover {
    background : #efefef;
    }
.xshopartikel > *.buyed {
    background : #efefef
    }
.xshopartikel > * > * {
    }
.xshopartikel > * > h2 {
    color     : #333;
    font-size : 14px;
    margin    : 0;
    }
.xshopartikel > * h2 > i {
    color         : #333;
    display       : block;
    font-size     : 25px;
    margin-bottom : 5px;
    }
.xshopartikel > * h2 > span {
    display     : block;
    font-size   : 11px;
    font-weight : normal;
    margin-top  : 5px;
    }
.xshopartikel > * > p {
    font-weight   : bold;
    margin-bottom : 20px;
    padding       : 0;
    }
.xshopartikel > * > div {
    bottom     : 10px;
    left       : 0;
    text-align : center;
    width      : 100%;
    }
.shopgutscheine {
    align-items : center;
    display     : flex;
    flex-flow   : row wrap;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    }
.shopgutscheine > * {
    border        : 1px solid #ddd;
    border-radius : 4px;
    display       : flex;
    flex          : 1 auto;
    flex-flow     : column;
    height        : 130px;
    margin        : 5px;
    padding       : 10px;
    width         : 200px;
    }
.shopgutscheine > * h2 {
    font-size : 14px;
    margin    : 0 0 5px 0;
    }
.shopgutscheine > * i {
    color     : #666;
    cursor    : help;
    font-size : 20px;
    }
.shopgutscheine > * div {
    font-size : 12px;
    }
.shopgutscheine > * a {
    font-size : 12px;
    margin    : 0 auto;
    width     : 200px;
    }
.shopgutscheine > * > *:not(a) {
    flex : 1;
    }
/*****************************************************
X-Profil
*****************************************************/
.xprofilcol {
    display    : flex;
    flex-flow  : row wrap;
    list-style : none;
    margin     : 0;
    padding    : 0 30px 30px 0;
    }
.xprofilcol > li {
    flex : 1 0;
    }
.xponline {
    border-radius : 2px;
    box-shadow    : 0 0 5px grey;
    margin-right  : 20px;
    overflow      : hidden;
    padding       : 2px 2px 2px 2px;
    position      : relative;
    width         : 200px;
    }
.xponline > span {
    background    : green;
    border-bottom : 1px solid #058c05;
    border-top    : 1px solid #058c05;
    bottom        : 10px;
    color         : white;
    display       : block;
    padding       : 5px 10px;
    position      : absolute;
    right         : -36px;
    text-align    : center;
    text-shadow   : 0 1px 1px #222;
    transform     : rotate(-45deg);
    width         : 100px;
    }
.xpavatar {
    border-radius   : 2px;
    display         : block;
    image-rendering : crisp-edges;
    margin          : 0 auto;
    }
.xprofilcol > li > .xpavatar {
    border-radius : 2px;
    box-shadow    : 0 0 5px grey;
    box-sizing    : border-box;
    margin        : unset;
    margin-right  : 20px;
    padding       : 2px;
    }
.xprofilcol > li + li {
    flex     : 3 0;
    position : relative;
    }
.xparound {
    margin-bottom : 20px;
    position      : relative;
    }
.xparound > h2 {
    color  : grey;
    margin : 0;
    }
.xparound > h2 .xwohnort {
    color        : grey;
    cursor       : pointer;
    font-size    : 11px;
    font-weight  : normal;
    padding-left : 10px;
    }
.xparound > h2 .xwohnort > img {
    display        : inline-block;
    margin-top     : -2px;
    vertical-align : middle;
    }
.xparound .xrang {
    font-weight : bold;
    margin-top  : 5px;
    }
.xparound > h3 {
    color     : #999;
    font-size : 12px;
    margin    : 20px 0 0 0;
    }
.rating {
    color        : #ddd;
    cursor       : pointer;
    direction    : rtl;
    font-size    : 15px;
    unicode-bidi : bidi-override;
    user-select  : none;
    }
.rating input {
    cursor  : pointer;
    display : none;
    }
.rating label:hover, .rating label:hover ~ label {
    color  : #ffc107;
    cursor : pointer;
    }
.rating.readonly label:hover, .rating.readonly label:hover ~ label {
    color  : inherit;
    cursor : pointer;
    }
.rating.readonly input:checked + label, .rating.readonly input:checked + label ~ label {
    color  : #ffc107;
    cursor : pointer;
    }
.xratein {
    align-items : center;
    color       : grey;
    display     : flex;
    font-size   : 20px;
    font-weight : bold;
    margin      : 2px 0 27px 0;
    }
.xratein .rating {
    margin-top : -2px;
    }
.xratein > * {
    margin-right : 7px;
    }
.xpmainbuttons {
    align-items : center;
    display     : flex;
    flex-flow   : row wrap;
    list-style  : none;
    margin      : 10px 0 20px 0;
    padding     : 0;
    }
.xpmainbuttons.ownxp > * {
    color  : #ddd;
    cursor : default;
    }
.xpmainbuttons > * {
    color        : grey;
    cursor       : pointer;
    margin-right : 34px;
    user-select  : none;
    }
.xpmainbuttons > *.psecure {
    color  : #ddd;
    cursor : default;
    }
.xpmainbuttons > *:last-child {
    margin-right : 0;
    }
.xpmainbuttons > * i {
    margin-right : 7px;
    }
.xpmainbuttons > * a {
    color       : grey;
    font-weight : normal;
    }
.xpmarkbutton {
    background  : #ddd;
    color       : #222;
    font-weight : normal;
    padding     : 10px;
    }
.xpmarkbutton > i {
    margin-right : 3px;
    }
.xpinfos {
    border-bottom : 1px solid #ddd;
    display       : flex;
    flex-flow     : row wrap;
    list-style    : none;
    margin        : 45px 0 0 -10px;
    padding       : 0;
    position      : relative;
    width         : 100%;
    z-index       : 100;
    }
.xpinfos.profilinhalt {
    font-size : 13px;
    margin    : 0 0 20px 0;
    }
.xpinfos > * {
    color        : #666;
    cursor       : pointer;
    display      : inline-block;
    margin-right : 19px;
    padding      : 10px;
    position     : relative;
    transition   : color 0.2s ease !important;
    user-select  : none;
    }
.xpinfos > *:last-child {
    margin-right : 0;
    }
.xpinfos > * i {
    margin-right : 3px;
    }
.xpinfos > *:after {
    background : darkorange;
    bottom     : -1px;
    content    : '';
    left       : 0;
    position   : absolute;
    right      : 0;
    }
.xpinfos > *:hover:after {
    animation : fill .5s forwards;
    z-index   : -10;
    }
.xpinfos > *:hover {
    color   : #222;
    z-index : 1;
    }
.xpinfos > *.select {
    background : #ddd;
    color      : #222;
    z-index    : 1;
    }
.xpinfos > * ul {
    background    : white;
    border-radius : 0 0 4px 4px;
    box-shadow    : 0 2px 5px rgba(0, 0, 0, .5);
    font-size     : 12px;
    left          : 0;
    list-style    : none;
    margin        : 0;
    opacity       : 0;
    overflow      : hidden;
    padding       : 0;
    position      : absolute;
    top           : 36px;
    visibility    : hidden;
    width         : 120px;
    }
.xpinfos > * ul > * {
    border-bottom : 1px solid #ddd;
    padding       : 5px 10px;
    transition    : background 0.4s ease !important;
    }
.xpinfos > * ul > *:last-child {
    border-bottom : 0;
    }
.xpinfos > * ul > *:hover {
    background : #ddd;
    }
.xpinfos > *:hover > ul {
    opacity    : 1;
    visibility : visible;
    }
@keyframes fill {
    0% {
        width  : 0;
        height : 1px;
        }
    50% {
        width  : 100%;
        height : 1px;
        }
    100% {
        width      : 100%;
        height     : 100%;
        background : #ddd;
        }
    }
.xpinhalt {
    display : none;
    }
.xpvisitors {
    position   : absolute;
    right      : 10px;
    text-align : center;
    top        : 0;
    }
.xpvisitors > h3 {
    color          : #999;
    font-size      : 10px;
    letter-spacing : 1px;
    margin         : 5px 0 10px 0;
    position       : relative;
    text-transform : uppercase;
    }
.xpvisitors > h3:before {
    background : #ddd;
    content    : '';
    height     : 1px;
    left       : -40px;
    position   : absolute;
    top        : 7px;
    width      : 30px;
    }
.xpvisitors > h3:after {
    background : #ddd;
    content    : '';
    height     : 1px;
    position   : absolute;
    right      : -40px;
    top        : 7px;
    width      : 30px;
    }
.xpvisitors > ul {
    display         : flex;
    justify-content : center;
    list-style      : none;
    margin          : 0 0 0 15px;
    padding         : 0;
    }
.xpvisitors > ul > * {
    margin-left : -15px;
    }
.xpvisitors > ul > * img {
    border        : 2px solid white;
    border-radius : 100% !important;
    padding       : 0 !important;
    }
.xpawards {
    overflow : hidden;
    width    : 200px;
    }
.xpawards > img {
    margin : 6px;
    }
.xpawards > h3 {
    color          : #999;
    font-size      : 10px;
    letter-spacing : 1px;
    position       : relative;
    text-transform : uppercase;
    }
.xpawards > h3:after {
    background  : #ddd;
    content     : '';
    height      : 1px;
    margin-left : 10px;
    position    : absolute;
    top         : 7px;
    width       : 100%;
    }
.awa {
    border-radius : 100%;
    color         : white;
    display       : inline-block;
    height        : 50px;
    margin        : 6px;
    overflow      : hidden;
    position      : relative;
    width         : 50px;
    }
.awa.aw_member {
    background : #5ca3cd;
    }
.awa.aw_forumpost {
    background : #24707d;
    }
.awa.aw_comments {
    background : #949718;
    }
.awa.aw_superactive {
    background : #ff1e1e;
    }
.awa.aw_news {
    background : #0ea78c;
    }
.awa.aw_wars {
    background : #e98d00;
    }
.awa.aw_points {
    background : indianred;
    }
.awa.aw_arcade {
    background : blueviolet;
    }
.awa.aw_pm {
    background : #d67c2c;
    }
.awa.aw_bthx {
    background : #e22b6e;
    }
.awa.aw_ethx {
    background : #297d24;
    }
.awa > div {
    border        : 2px solid white;
    border-radius : 100%;
    box-sizing    : border-box;
    height        : 46px;
    left          : 2px;
    position      : absolute;
    top           : 2px;
    width         : 46px;
    }
.awa > div > i {
    font-size   : 20px;
    position    : absolute;
    text-align  : center;
    text-shadow : 0 1px 1px rgba(0, 0, 0, 0.1);
    top         : 4px;
    width       : 100%;
    }
.awa > div > span {
    border-radius : 100px;
    bottom        : 4px;
    font-size     : 10px;
    position      : absolute;
    text-align    : center;
    text-shadow   : 0 1px 1px rgba(0, 0, 0, 0.1);
    width         : 100%;
    }
.xawards .awa {
    height : 90px;
    width  : 90px;
    }
.xawards .awa > div {
    height : 86px;
    width  : 86px;
    }
.xawards .awa > div > i {
    font-size : 35px;
    top       : 15px;
    }
.xawards .awa > div > span {
    bottom    : 8px;
    font-size : 18px;
    }
.xawards {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.xawards > li {
    align-items : flex-start;
    display     : flex;
    flex-flow   : row wrap;
    }
.xawards li > *:first-child {
    flex         : 0;
    margin-right : 10px;
    }
.xawards li > *:last-child {
    flex : 1;
    }
/*****************************************************
Profil Chronic
*****************************************************/
.chronicform {
    align-items : flex-start;
    display     : flex;
    }
.chronicform > img {
    border-radius : 100%;
    flex          : 0 0 auto;
    margin-right  : 12px;
    }
.cshare {
    border        : 1px solid #ccc;
    border-radius : 4px;
    box-sizing    : border-box;
    color         : #aaa;
    min-height    : 40px;
    outline       : none;
    padding       : 6px 6px 3px 6px;
    position      : relative;
    width         : 100%;
    }
.cshare.view {
    border : 0;
    }
.cshare:before {
    border-bottom : 7px solid transparent;
    border-left   : 0 solid transparent;
    border-right  : 8px solid #ccc;
    border-top    : 7px solid transparent;
    content       : '';
    height        : 0;
    left          : -8px;
    position      : absolute;
    top           : 10px;
    width         : 0;
    }
.cshare.view:before {
    left : -1px;
    }
.cshare > textarea {
    border   : 0;
    cursor   : pointer;
    height   : 40px;
    outline  : 0;
    overflow : hidden;
    resize   : none;
    width    : 100%;
    }
.cshare > input[type=text] {
    cursor  : pointer;
    height  : 40px;
    outline : none;
    width   : 100%;
    }
.chbuttons {
    display         : none;
    justify-content : flex-end;
    list-style      : none;
    margin          : 5px 0 0 0;
    padding         : 0;
    }
.chbuttons > * {
    margin-left : 5px;
    }
.chentries {
    background : #efefef;
    display    : flex;
    flex-flow  : column;
    list-style : none;
    margin     : 40px 0 0 0;
    padding    : 0;
    }
.chentries > li {
    background : white;
    margin     : 10px 0 0 0;
    padding    : 10px 0;
    position   : relative;
    }
.chentries > li .delchronikentry {
    position : absolute;
    right    : 10px;
    }
.chentries > li > div {
    align-items : center;
    display     : flex;
    }
.chentries > li > div > a > img {
    border-radius : 100% !important;
    box-shadow    : 0 0 0 !important;
    padding       : 0 !important;
    }
.chentries > li > div > div {
    margin-left : 10px;
    }
.chentries > li > div > div span {
    display    : block;
    margin-top : 5px;
    }
.chentries > li > p {
    margin  : 0;
    padding : 10px 5px;
    }
.chentries > li ul {
    border-bottom : 1px solid #ddd;
    border-top    : 1px solid #ddd;
    display       : flex;
    list-style    : none;
    margin        : 0 0 0 0;
    padding       : 5px;
    }
.chentries > li ul > * {
    color        : #666;
    cursor       : pointer;
    font-weight  : bold;
    margin-right : 15px;
    transition   : color 0.3s linear;
    user-select  : none;
    }
.chentries > li ul > *:hover {
    color : #222
    }
.chentries > li ul > *.showccoms {
    margin-left : auto
    }
.chentries > li > small {
    color   : grey !important;
    display : block;
    margin  : 5px 0 0 5px;
    }
.outputkoms {
    display     : block;
    padding-top : 10px;
    }
.ccommentform {
    display    : none;
    margin-top : 10px;
    }
.achronicform {
    align-items : flex-start;
    display     : flex;
    }
.achronicform > img {
    border-radius : 100% !important;
    flex          : 0 0 auto;
    margin-right  : 12px;
    }
.acshare {
    border-radius : 4px;
    box-sizing    : border-box;
    color         : #aaa;
    min-height    : 40px;
    outline       : none;
    padding       : 6px;
    position      : relative;
    width         : 100%;
    }
.acshare:before {
    border-bottom : 7px solid transparent;
    border-left   : 0 solid transparent;
    border-right  : 8px solid #ccc;
    border-top    : 7px solid transparent;
    content       : '';
    height        : 0;
    left          : -1px;
    position      : absolute;
    top           : 10px;
    width         : 0;
    }
.acshare > textarea {
    border   : 0;
    cursor   : pointer;
    height   : 20px !important;
    outline  : 0;
    overflow : hidden;
    resize   : none;
    width    : 100%;
    }
.achbuttons {
    border          : 0 !important;
    display         : none;
    justify-content : flex-end;
    list-style      : none;
    margin          : 5px 0 0 0;
    padding         : 0;
    }
.achbuttons > * {
    margin-left  : 5px;
    margin-right : 0 !important;
    }
.subcoms {
    display    : none;
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.subcoms > li {
    align-items : flex-start;
    display     : flex;
    flex-flow   : row;
    margin      : 10px;
    }
.subcoms > li > * {
    margin : 0 7px;
    }
.subcoms > li > a img {
    border-radius : 100%;
    }
.subcoms > li > div p {
    background    : #ededed;
    border-radius : 10px;
    margin        : 0;
    padding       : 8px;
    position      : relative;
    }
.subcoms > li > div p > i {
    background    : white;
    border-radius : 10px;
    display       : block;
    padding       : 5px 10px;
    position      : absolute;
    right         : -20px;
    top           : -10px;
    }
.subcoms > li > div p:before {
    border-bottom : 5px solid transparent;
    border-left   : 0 solid transparent;
    border-right  : 6px solid #ededed;
    border-top    : 2px solid transparent;
    content       : '';
    height        : 0;
    left          : -6px;
    position      : absolute;
    top           : 15px;
    width         : 0;
    }
.subcoms > li > div > span {
    color        : #999;
    font-size    : 10px;
    padding-left : 10px;
    }
.sublike {
    cursor      : pointer;
    transition  : color 0.3s linear;
    user-select : none;
    }
.sublike:hover {
    color : #222;
    }
.delchronikcom, .delchronikentry {
    cursor : pointer;
    }
/*****************************************************
Profil Last Activitys
*****************************************************/
.xplastac {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.xplastac > li {
    align-items    : center;
    border-bottom  : 1px solid #ddd;
    display        : flex;
    flex-flow      : row wrap;
    margin-bottom  : 20px;
    padding-bottom : 20px;
    }
.xplastac > li:last-child {
    border-bottom : 0 !important;
    }
.xplastac > li > img {
    border-radius : 100%;
    margin-right  : 10px;
    }
.xplastac > li > div {
    max-width : 650px;
    }
.xplastac > li > div > span {
    display       : block;
    margin-bottom : 10px;
    }
.xplastac > li > span {
    color        : #999;
    flex         : 1 auto;
    margin-right : 10px;
    text-align   : right;
    }
.xplastacmore {
    background : white !important;
    border-top : 1px solid #ddd;
    margin-top : 10px;
    padding    : 10px 0 0 0;
    position   : relative;
    text-align : center;
    }
.xpmore {
    padding : 5px 10px !important;
    }
.xpmore.load, .xpmoretimeline.load {
    background : darkorange !important;
    }
.xplastacfilter {
    align-items     : center;
    border-bottom   : 1px solid #ddd;
    display         : flex;
    justify-content : flex-end;
    list-style      : none;
    margin          : 0 0 20px 0;
    padding         : 0 0 10px 0;
    }
.xplastacfilter > * {
    margin      : 0 5px;
    user-select : none;
    }
.xplastac.box > li {
    align-items    : flex-start;
    border-bottom  : 1px solid #ddd;
    display        : flex;
    flex-flow      : row wrap;
    margin-bottom  : 10px;
    padding-bottom : 10px;
    text-align     : left;
    }
.xplastac.box > li > a {
    margin-right : 10px;
    }
.xplastac.box > li > a > img {
    border-radius : 100%;
    }
.xplastac.box > li > div {
    flex : 1 0;
    }
.xplastac.box > li > div > span > i {
    font-size  : 11px;
    font-style : normal;
    }
.lastacscroll {
    max-height : 430px;
    overflow   : hidden;
    }
/*****************************************************
Profil About
*****************************************************/
.xpabout {
    align-items : center;
    display     : flex;
    flex-flow   : row wrap;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    }
.xpabout.forum {
    display : block;
    }
.xpabout > li {
    align-items : center;
    color       : #555;
    display     : flex;
    flex        : 50%;
    margin      : 15px 0;
    }
.xpabout.forum > li {
    margin : 35px 0;
    }
.xpabout.forum > li:last-child {
    margin-bottom : 0;
    }
.xpabout.forum > li:last-child div {
    text-align : left;
    }
.xpabout > li > span {
    flex        : 1 0;
    font-weight : bold;
    }
.xpabout > li > span + span {
    flex        : 2 0;
    font-weight : normal;
    }
.xpabout.forum > li > span + span {
    flex        : 5 0;
    font-weight : normal;
    }
.xpabout_title:nth-child(1) {
    border-bottom : 0;
    margin-top    : 0;
    }
.xpabout_title {
    border-bottom  : 1px solid #ddd;
    color          : #999;
    font-size      : 10px;
    font-weight    : bold;
    letter-spacing : 1px;
    margin         : 20px 0;
    text-transform : uppercase;
    }
/*****************************************************
Profil Stats
*****************************************************/
.progress-circleress-0:after.prog {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(90deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-1:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(93.6deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-2:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(97.2deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-3:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(100.8deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-4:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(104.4deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-5:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(108deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-6:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(111.6deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-7:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(115.2deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-8:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(118.8deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-9:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(122.4deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-10:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(126deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-11:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(129.6deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-12:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(133.2deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-13:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(136.8deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-14:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(140.4deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-15:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(129.6deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-16:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(133.2deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-17:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(136.8deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-18:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(140.4deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-19:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(144deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-20:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(151.2deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-21:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(158.6deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-22:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(161.2deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-23:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(165.6deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-24:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(169.2deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-25:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(180deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-26:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(183.6deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-27:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(187.2deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-28:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(190.8deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-29:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(194.4deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-30:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(198deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-31:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(201.6deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-32:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(205.2deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-33:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(208.8deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-34:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(212.4deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-35:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(216deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-40:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(234deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-36:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(219.6deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-37:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(223.2deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-38:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(226.8deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-39:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(230.4deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-41:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(237.6deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-42:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(241.2deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-43:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(244.8deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-44:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(248.4deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-45:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(252deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-46:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(255.6deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-47:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(259.2deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-48:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(262.8deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-49:after {
    background-image : linear-gradient(90deg, #ebebeb 50%, transparent 50%, transparent), linear-gradient(266.4deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-50:after {
    background-image : linear-gradient(-90deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-51:after {
    background-image : linear-gradient(-86.4deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-52:after {
    background-image : linear-gradient(-82.6deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-53:after {
    background-image : linear-gradient(-79.2deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-54:after {
    background-image : linear-gradient(-75.6deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-55:after {
    background-image : linear-gradient(-72deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-56:after {
    background-image : linear-gradient(-68.4deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-57:after {
    background-image : linear-gradient(-64.8deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-58:after {
    background-image : linear-gradient(-61.2deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-59:after {
    background-image : linear-gradient(-57.6deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-60:after {
    background-image : linear-gradient(-54deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-61:after {
    background-image : linear-gradient(-50.4deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-62:after {
    background-image : linear-gradient(-46.8deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-63:after {
    background-image : linear-gradient(-43.2deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-64:after {
    background-image : linear-gradient(-39.6deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-65:after {
    background-image : linear-gradient(-36deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-66:after {
    background-image : linear-gradient(-32.4deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-67:after {
    background-image : linear-gradient(-28.8deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-68:after {
    background-image : linear-gradient(-25.2deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-69:after {
    background-image : linear-gradient(-21.6deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-70:after {
    background-image : linear-gradient(-18deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-71:after {
    background-image : linear-gradient(-14.4deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-72:after {
    background-image : linear-gradient(-10.8deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-73:after {
    background-image : linear-gradient(-7.2deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-74:after {
    background-image : linear-gradient(-3.6deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-75:after {
    background-image : linear-gradient(0deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-76:after {
    background-image : linear-gradient(3.6deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-77:after {
    background-image : linear-gradient(7.2deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-78:after {
    background-image : linear-gradient(10.8deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-79:after {
    background-image : linear-gradient(14.4deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-80:after {
    background-image : linear-gradient(18deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-81:after {
    background-image : linear-gradient(21.6deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-82:after {
    background-image : linear-gradient(25.2deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-83:after {
    background-image : linear-gradient(28.8deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-84:after {
    background-image : linear-gradient(32.4deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-85:after {
    background-image : linear-gradient(36deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-86:after {
    background-image : linear-gradient(39.2deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-87:after {
    background-image : linear-gradient(43.2deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-88:after {
    background-image : linear-gradient(46.8deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-89:after {
    background-image : linear-gradient(50.4deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-90:after {
    background-image : linear-gradient(54deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-91:after {
    background-image : linear-gradient(57.6deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-92:after {
    background-image : linear-gradient(61.2deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-93:after {
    background-image : linear-gradient(64.8deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-94:after {
    background-image : linear-gradient(68.4deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-95:after {
    background-image : linear-gradient(72deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-96:after {
    background-image : linear-gradient(75.6deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-97:after {
    background-image : linear-gradient(79.2deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-98:after {
    background-image : linear-gradient(82.8deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-99:after {
    background-image : linear-gradient(86.4deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.progress-circle.progress-100:after {
    background-image : linear-gradient(90deg, var(--main-theme-color) 50%, transparent 50%, transparent), linear-gradient(270deg, var(--main-theme-color) 50%, #ebebeb 50%, #ebebeb) !important;
    }
.xpstats {
    align-items : flex-start;
    display     : flex;
    flex-flow   : row wrap;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    width       : 78%;
    }
.xpstats > * {
    margin     : 10px;
    text-align : center;
    width      : 130px;
    }
.xpstats > * > span {
    color      : #999;
    display    : block;
    margin-top : 10px;
    }
.xpstats .progress-circle {
    margin : 0 auto;
    }
.xpstats > *:last-child .progress-circle {
    height : 150px;
    width  : 150px;
    }
.xpstats > *:last-child .progress-circle span {
    height      : 120px;
    left        : 15px;
    line-height : 120px;
    margin-left : 0;
    margin-top  : 0;
    top         : 15px;
    width       : 120px;
    }
.xpstats > *:last-child {
    margin-left : 40px;
    position    : absolute;
    right       : -40px;
    top         : 400px;
    width       : 200px;
    }
.xpstats > *:last-child > span {
    font-weight : bold;
    }
.progress-circle {
    background-color : #ebebeb;
    border-radius    : 50%;
    height           : 70px;
    position         : relative;
    width            : 70px;
    }
.progress-circle:after {
    -webkit-animation : colorload 2s;
    animation         : colorload 2s;
    border-radius     : 50%;
    content           : '';
    display           : inline-block;
    height            : 100%;
    width             : 100%;
    }
.progress-circle span {
    background    : #fff;
    border-radius : 50%;
    color         : #8b8b8b;
    display       : block;
    font-size     : 1rem;
    height        : 60px;
    left          : 50%;
    line-height   : 60px;
    margin-left   : -30px;
    margin-top    : -30px;
    position      : absolute;
    text-align    : center;
    top           : 50%;
    width         : 60px;
    z-index       : 1;
    }
.progress-circle span:after {
    color       : #8b8b8b;
    content     : "%";
    font-weight : 600;
    }
@keyframes colorload {
    0% {
        opacity   : 0;
        transform : rotate(0deg);
        }
    100% {
        opacity   : 1;
        transform : rotate(360deg);
        }
    }
/*****************************************************
Profil Friends
*****************************************************/
.xpfriends {
    display    : flex;
    flex-flow  : row wrap;
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.xpfriends > * {
    margin     : 10px 20px;
    text-align : center;
    }
.xpfriends > * img {
    border-radius : 100%;
    box-shadow    : 0 0 5px grey;
    padding       : 2px;
    }
.xpfriends > * span {
    display    : block;
    margin-top : 5px;
    }
/*****************************************************
Profil Gallery
*****************************************************/
.xalben {
    display    : flex;
    flex-flow  : row wrap;
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.xalben.ngal {
    justify-content : center;
    }
.xalben > *:not(.noxalbum) {
    background    : #ddd;
    border-radius : 4px;
    box-shadow    : 0 0 1px rgba(0, 0, 0, 1);
    height        : 230px;
    margin        : 10px;
    overflow      : hidden;
    position      : relative;
    width         : 230px;
    }
.xalben > * .xalbum_cover {
    background-position : top center !important;
    background-size     : cover !important;
    box-shadow          : inset 0 0 0 3px #fff;
    height              : 100%;
    position            : absolute;
    transition          : all 0.3s linear;
    width               : 100%;
    z-index             : 10;
    }
.xalben > * .xalbum_cover.gback i {
    color     : #cbcbcb;
    font-size : 130px;
    left      : 50%;
    position  : absolute;
    top       : 50%;
    transform : translate(-50%, -50%);
    }
.xalben > li > a:hover > .xalbum_cover {
    box-shadow : inset 0 0 0 3px darkorange;
    }
.xalben > * .xalbum_dets {
    background  : linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    bottom      : 0;
    box-sizing  : border-box;
    color       : white;
    font-size   : 13px;
    font-weight : bold;
    left        : 0;
    padding     : 10px;
    position    : absolute;
    text-shadow : 0 1px 1px #222;
    width       : 100%;
    z-index     : 11;
    }
.xalben > * .xalbum_dets > span {
    display     : block;
    font-size   : 10px;
    font-weight : normal;
    margin-top  : 10px;
    }
.xalben > *:hover > .zugriff {
    opacity    : 1;
    visibility : visible;
    }
.xalben .nlikealbum {
    background    : rgba(34, 34, 34, 0.79);
    border-radius : 4px;
    color         : #ddd;
    cursor        : pointer;
    font-size     : 20px;
    left          : 10px;
    padding       : 10px;
    position      : absolute;
    top           : 10px;
    transform     : scale(0);
    transition    : transform 0.3s linear;
    z-index       : 103;
    }
.xalben .nlikealbum > span {
    background    : rgba(34, 34, 34, 0.79);
    border-radius : 100%;
    font-size     : 14px;
    height        : 22px;
    line-height   : 22px;
    position      : absolute;
    right         : 5px;
    text-align    : center;
    text-shadow   : 0 1px 1px black;
    top           : -5px;
    width         : 22px;
    }
.xalben > li:hover > .nlikealbum {
    transform : scale(1);
    }
.nlikealbum.select {
    transform : scale(1);
    }
/*****************************************************
Radio
*****************************************************/
.cwlist {
    list-style : none;
    margin     : 0;
    padding    : 0;
    }
.cwlist > li {
    border-bottom : 1px solid #ddd;
    margin        : 5px 0;
    padding       : 5px 0;
    position      : relative;
    word-wrap     : break-word;
    }
.cwlist > li:first-child {
    margin-top  : 0;
    padding-top : 0;
    }
.cwlist > li:last-child {
    border-bottom  : 0;
    margin-bottom  : 0;
    padding-bottom : 0;
    }
.cwlist > li > span {
    display     : block;
    font-weight : bold;
    width       : 255px;
    }
.cwlist > li > span + span {
    color       : #666;
    font-size   : 11px;
    font-weight : normal;
    padding-top : 5px;
    }
.cwlist > li > i {
    cursor   : pointer;
    position : absolute;
    right    : 0;
    top      : 2px;
    }
/*****************************************************
Chat
*****************************************************/
#addsmiles {
    position : relative;
    }
.chatslider {
    background    : #f3f3f3;
    border-radius : 4px 6px 6px 6px;
    box-shadow    : 0 6px 12px rgba(0, 0, 0, 0.6);
    left          : 0;
    overflow      : hidden;
    position      : absolute;
    top           : 29px;
    width         : 300px;
    z-index       : 117;
    }
.chatslider#showemoji {
    width : auto;
    }
.chatslider h2 {
    background    : linear-gradient(to top, #222, #2c2b2b);
    border-bottom : 3px solid orange;
    color         : white;
    font-size     : 13px;
    margin        : 0;
    padding       : 10px;
    text-align    : center;
    text-shadow   : 0 1px 1px black;
    }
.chatslider > span {
    display    : block;
    margin-top : 5px;
    overflow   : hidden;
    padding    : 0 10px;
    word-wrap  : break-word;
    }
.chatslider > span a {
    cursor  : pointer;
    display : inline-block;
    margin  : 3px;
    }
.emoausgabe {
    max-height : 260px;
    padding    : 10px 0;
    }
.emoji_switch {
    border-bottom : 1px solid #ccc;
    display       : flex;
    list-style    : none;
    margin        : 0;
    padding       : 0 0 5px 0;
    user-select: none;
    }
.emoji_switch > * {
    background : #ddd;
    cursor     : pointer;
    flex       : 1;
    margin     : 0 5px;
    padding    : 5px;
    }
.emoji_switch > *.select {
    background : #333;
    color      : white;
    }
/*****************************************************
Events
*****************************************************/
.eventtip {
    max-width  : 300px;
    text-align : center;
    }
.eventtip > h2 {
    border-bottom : 1px solid #666;
    font-size     : 12px;
    margin        : 0 0 5px 0;
    }
/*****************************************************
Switchboxen
*****************************************************/
.forumswitch {
    border-bottom : 1px solid #dddddd;
    display       : flex;
    flex-flow     : row;
    list-style    : none;
    margin        : -5px 0 0 0;
    padding       : 0 0 5px 0;
    text-align    : center;
    }
.forumswitch li {
    background    : linear-gradient(to top, #222, #2c2b2b);
    border-radius : 4px;
    color         : white;
    cursor        : pointer;
    flex          : 1;
    margin        : 0 3px;
    padding       : 6px 6px;
    text-shadow   : 0 1px 1px rgba(0, 0, 0, 0.6);
    transition    : all 0.3s linear;
    user-select   : none;
    }
.forumswitch li:hover {
    background : darkorange;
    }
.forumswitch li.select {
    background : darkorange;
    }
.ausgabewechsel {
    padding : 0 10px 10px 10px;
    }
.uploadfile {
    display : inline-block;
    margin  : 10px;
    }
.progress {
    background    : #fff;
    border        : 1px solid #ddd;
    border-radius : 4px;
    padding       : 5px;
    }
.progress > .abort {
    cursor      : pointer;
    float       : right;
    font-size   : 20px;
    line-height : 18px;
    opacity     : 0.5;
    }
.progress > .abort:hover {
    opacity : 1;
    }
.progress-error {
    border : 1px solid #e65442;
    color  : #e65442;
    }
.progress > .progress-bar {
    background-color : #aaa;
    height           : 10px;
    margin-top       : 5px;
    max-width        : 100%;
    transition       : width ease .1s;
    width            : 0%;
    }
.progress-error > .progress-bar {
    background-color : #e65442;
    }
.attach {
    align-items : center;
    display     : flex;
    }
.attach > * img {
    border-radius : 4px;
    margin-right  : 10px;
    }
.attach > div {
    display   : block;
    font-size : 10px;
    }
.outattach {
    align-items   : center;
    background    : #efefef;
    border-radius : 4px;
    display       : inline-flex;
    padding       : 5px 10px;
    }
.outattach > img {
    margin-right : 5px;
    width        : 24px;
    }
.outattach > i {
    color        : #ccc;
    font-size    : 34px;
    margin-right : 10px;
    text-align   : center;
    width        : 34px;
    }
.outattach > span {
    color       : #333;
    display     : block;
    hyphens     : auto;
    text-shadow : 0 1px 1px white;
    word-break  : break-all;
    }
/*****************************
Uploadstyle
 ****************************/
.uploadpictures {
    font-size  : 13px;
    list-style : none;
    margin     : 10px;
    padding    : 0;
    }
.uploadpictures li {
    background  : #dddddd;
    cursor      : pointer;
    display     : inline-block;
    padding     : 10px 15px 10px 15px;
    user-select : none;
    }
.uploadpictures li:active {
    background : #333;
    color      : #dddddd;
    }
.uploadpictures li.select {
    background : #333;
    color      : #dddddd;
    }
.uploadoutput {
    border  : 1px solid #dddddd;
    margin  : 20px;
    padding : 10px;
    }
.ugpics {
    cursor         : pointer;
    display        : inline-block;
    margin         : 10px;
    vertical-align : top;
    }
.ugpics img {
    max-width : 100px;
    }
.attfiles {
    align-items : center;
    display     : flex;
    flex-flow   : row wrap;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    }
.attfiles > * {
    border        : 1px solid #ddd;
    border-radius : 4px;
    flex          : auto;
    line-height   : 20px;
    margin        : 10px;
    padding       : 10px;
    }
.attfiles > * div {
    color     : #333;
    font-size : 13px;
    }
.attfiles > * div > div {
    hyphens   : auto;
    overflow  : hidden;
    word-wrap : break-word;
    }
.attfiles > * i {
    color        : #ccc;
    font-size    : 64px;
    margin-right : 10px;
    text-align   : center;
    width        : 64px;
    }
.xsel {
    box-sizing : border-box;
    list-style : none;
    margin     : 0;
    padding    : 0;
    width      : 300px;
    }
.xsel > li {
    background    : #fff;
    border        : 1px solid #ccc;
    border-radius : 2px;
    box-sizing    : border-box;
    cursor        : pointer;
    padding       : 10px;
    position      : relative;
    user-select   : none;
    }
.xsel > li > i {
    background    : white;
    border-radius : 4px;
    padding       : 5px 0 5px 10px;
    position      : absolute;
    right         : 10px;
    top           : 50%;
    transform     : translate(0, -50%);
    }
.xsel > li > span {
    align-items : center;
    color       : grey;
    display     : flex;
    overflow    : hidden;
    text-shadow : 0 1px 1px white;
    width       : 100%;
    }
.xsel > li > span > img {
    border-radius : 4px;
    margin-right  : 5px;
    width         : 32px;
    }
.xsel > li > ul {
    background    : white;
    border        : 1px solid #ccc;
    border-radius : 0 0 4px 4px;
    border-top    : none;
    box-shadow    : 0 1px 5px #ddd;
    display       : none;
    left          : -1px;
    list-style    : none;
    margin        : 0 0 0 0;
    max-height    : 300px;
    min-width     : calc(100% - 10px);
    overflow      : hidden;
    padding       : 10px 5px;
    position      : absolute;
    top           : calc(100% + 1px);
    z-index       : 100;
    }
.xsel > li > ul li {
    align-items   : center;
    background    : white;
    border-bottom : 1px solid #ddd;
    box-sizing    : border-box;
    display       : flex;
    padding       : 10px;
    transition    : all 0.25s ease-in-out;
    user-select   : none;
    }
.xsel > li > ul li:last-child {
    border-bottom : 0;
    }
.xsel > li > ul li img {
    border-radius : 4px;
    margin-right  : 5px;
    width         : 32px;
    }
.xsel > li > ul li span {
    text-align : left;
    }
.xsel > li > ul li:hover {
    background : #eee;
    }
.xsel > li > ul li.xselect {
    background : #eee
    }
.over {
    align-items : center;
    display     : flex;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    user-select : none;
    }
.over .leftover {
    flex        : 1 auto;
    margin-left : 1px;
    }
.over .middleover {
    flex        : 1 auto;
    margin-left : 1px;
    }
.over .rightover {
    margin-right : 1px;
    }
.over .leftover > ul, .over .rightover > ul {
    align-items : center;
    display     : flex;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    }
.over .leftover > ul > *:last-child, .over .rightover > ul > *:last-child {
    margin-left : 5px;
    }
.outchars {
    font-size   : 16px;
    font-weight : bold;
    }
.djan {
    align-items     : center;
    display         : flex !important;
    font-size       : 14px;
    font-weight     : bold;
    justify-content : center;
    text-shadow     : 0 1px 1px white;
    }
.djan > img {
    margin-right : 10px;
    }
.bust {
    align-items     : center;
    border-bottom   : 1px solid #ddd;
    border-top      : 1px solid #ddd;
    display         : flex;
    flex-flow       : row wrap;
    justify-content : center;
    list-style      : none;
    margin          : 0 auto 20px auto;
    padding         : 10px;
    width           : 600px;
    }
.bust > * {
    background    : #fff;
    border-radius : 2px;
    cursor        : pointer;
    font-weight   : bold;
    margin        : 4px;
    padding       : 4px 6px;
    transition    : all 0.25s ease-in-out;
    user-select   : none;
    }
.bust > *:hover {
    background : #ddd;
    }
.bust > *.select {
    background : red;
    color      : white;
    }
.bust > *.wait {
    background : #ddd;
    color      : white;
    }
.ui-effects-transfer {
    border : 1px solid darkorange;
    }
.viewerx {
    margin-left : -15px;
    overflow    : hidden;
    }
.viewerx .place {
    float  : left;
    height : 16px;
    width  : 16px;
    }
.viewerx .pwchanimg {
    background-image : URL(ts3wi/gfx/images/pwchannel.png);
    float            : left;
    height           : 16px;
    width            : 16px;
    }
.viewerx .chanimg {
    background-image : URL(ts3wi/gfx/images/channel.png);
    float            : left;
    height           : 16px;
    width            : 16px;
    }
.viewerx .channame {
    float       : left;
    font-size   : 12px;
    font-weight : lighter;
    height      : 16px;
    line-height : 16px;
    }
.viewerx .fullimg {
    background-image : URL(ts3wi/gfx/images/channel_red.png);
    float            : left;
    height           : 16px;
    margin-right     : 2px;
    width            : 16px;
    }
.viewerx .clear {
    clear : both !important;
    }
.viewerx .away_img {
    background-image : URL(ts3wi/gfx/images/away.png);
    float            : left;
    height           : 16px;
    margin-right     : 2px;
    width            : 16px;
    }
.viewerx .away_msg {
    float       : left;
    font-size   : 12px;
    font-style  : normal;
    font-weight : lighter;
    height      : 16px;
    line-height : 16px;
    }
.viewerx .hwhead_img {
    background-image : URL(ts3wi/gfx/images/hwhead.png);
    float            : left;
    height           : 16px;
    margin-right     : 2px;
    width            : 16px;
    }
.viewerx .hwmic_img {
    background-image : URL(ts3wi/gfx/images/hwmic.png);
    float            : left;
    height           : 16px;
    margin-right     : 2px;
    width            : 16px;
    }
.viewerx .head_img {
    background-image : URL(ts3wi/gfx/images/head.png);
    float            : left;
    height           : 16px;
    margin-right     : 2px;
    width            : 16px;
    }
.viewerx .mic_img {
    background-image : URL(ts3wi/gfx/images/mic.png);
    float            : left;
    height           : 16px;
    margin-right     : 2px;
    width            : 16px;
    }
.viewerx .player_on_img {
    background-image : URL(ts3wi/gfx/images/player_on.png);
    float            : left;
    height           : 16px;
    margin-right     : 2px;
    width            : 16px;
    }
.viewerx .player_img {
    background-image : URL(ts3wi/gfx/images/player.png);
    float            : left;
    height           : 16px;
    margin-right     : 2px;
    width            : 16px;
    }
.viewerx .player_command_img {
    background-image : URL(ts3wi/gfx/images/player_commander.png);
    float            : left;
    height           : 16px;
    margin-right     : 2px;
    width            : 16px;
    }
.viewerx .player_command_on_img {
    background-image : URL(ts3wi/gfx/images/player_commander_on.png);
    float            : left;
    height           : 16px;
    margin-right     : 2px;
    width            : 16px;
    }
.viewerx .clientnick {
    float       : left;
    font-size   : 12px;
    font-style  : normal;
    font-weight : bold;
    height      : 16px;
    line-height : 16px;
    }
.viewerx .channel {
    height        : 16px;
    line-height   : 16px;
    margin-bottom : 3px;
    }
.viewerx .client {
    height        : 16px;
    margin-bottom : 3px;
    }
.viewerx .client img {
    margin         : 0 1px;
    object-fit     : contain;
    vertical-align : middle;
    width          : 16px;
    }
.viewerx .servername {
    float       : left;
    font-size   : 12px;
    font-style  : normal;
    font-weight : lighter;
    height      : 16px;
    line-height : 16px;
    }
.viewerx .server_img {
    background-image : URL(ts3wi/gfx/images/server.png);
    float            : left;
    height           : 16px;
    width            : 16px;
    }
.viewerx .copy {
    font-size   : 10px;
    font-style  : normal;
    font-weight : lighter;
    height      : 16px;
    line-height : 16px;
    }
.xarcadeplayliststart {
    align-items : center;
    display     : flex;
    flex-flow   : row wrap;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    text-align  : left;
    }
.xarcadeplayliststart > li:first-child {
    padding-top : 0;
    }
.xarcadeplayliststart > li:last-child {
    border-bottom  : 0;
    padding-bottom : 0;
    }
.xarcadeplayliststart > li {
    align-items   : center;
    border-bottom : 1px solid #ddd;
    display       : flex;
    padding       : 5px;
    width         : 100%;
    }
.xarcadeplayliststart > li > div {
    margin-right : 10px;
    }
.xarcadeplayliststart > li > div img {
    border-radius : 100%;
    }
.xarcadeplayliststart > li > div + div span {
    display     : block;
    line-height : 26px;
    }
.xarcgicon {
    border-radius   : 4px;
    box-shadow      : 0 2px 2px 0 rgba(0, 0, 0, 0.35);
    display         : block;
    image-rendering : crisp-edges;
    margin          : 0 auto;
    }
.xarcgicon_cat {
    border-radius   : 4px;
    display         : block;
    image-rendering : crisp-edges;
    margin          : 0 auto;
    width           : 50px;
    }
.linfo {
    display     : block;
    font-size   : 10px;
    font-weight : bold;
    margin-top  : 5px;
    }
.emoji_panel {
    background : white;
    text-align : center;
    }
.emoji_panel > h2 {
    border-bottom : 1px solid #ddd;
    border-top    : 1px solid #ddd;
    padding       : 10px;
    }
.insert_emoji {
    display   : inline-flex;
    font-size : 18px;
    height    : 20px;
    margin    : 5px;
    width     : 20px;
    }
#song {
    overflow    : hidden;
    white-space : nowrap;
    }
/*****************************************************
Cups
*****************************************************/
.cupcats {
    border : 1px solid #ccc;
    }
.cupcats legend {
    font-size   : 13px;
    font-weight : bold;
    }
/*****************************************************
Media Querys
*****************************************************/
@media only screen and (max-width : 1000px) {
    .xpmainbuttons > * {
        margin : 10px;
        }
    header {
        height : 250px;
        }
    #showsmiles {
        border-radius : 4px 0 6px 6px;
        left          : auto;
        right         : 0;
        }
    #chatbox_nav {
        display : block;
        }
    #sharchiv {
        display : none;
        }
    #shoutform ul {
        background     : #333;
        border-radius  : 4px;
        color          : white;
        display        : none;
        font-size      : 11px !important;
        left           : auto;
        padding-bottom : 10px;
        right          : 10px;
        top            : 35px;
        width          : 100px;
        }
    #shoutform ul li {
        display     : block;
        height      : 25px;
        line-height : 25px;
        margin      : 0;
        padding     : 0 5px;
        }
    #shoutform ul li button {
        font-size : 11px !important;
        width     : 100%;
        }
    #shoutform ul li input {
        display : inline-block !important;
        margin  : 0 !important;
        }
    #showarchiv {
        display : block !important;
        }
    #showsend {
        display : none !important;
        }
    #shfirstsend {
        display : block !important;
        }
    .messagecontainer.left .inhaltmessage .timeautor .chtime, .messagecontainer.right .inhaltmessage .timeautor .chtime {
        display : none;
        }
    }
@media only screen and (max-width : 870px) {
    #xgame {
        width : 100% !important;
        }
    #xarcadeshowgame > div + div {
        flex : auto !important;
        }
    header {
        height     : 150px;
        margin-top : 130px;
        }
    .xnoticontent {
        flex-flow : column wrap;
        width     : 100%;
        }
    .xnoticontent > * {
        width : 100%;
        }
    .floatingbox {
        top     : 18% !important;
        z-index : 1000;
        }
    #regdiv.select {
        top : 18% !important;
        }
    #barmenu {
        position : unset;
        }
    #barmenu > li {
        position : unset;
        }
    #barmenu > li > ul {
        left : 0;
        top  : 126px;
        }
    #barmenu > li ul:before {
        display : none;
        }
    .rline {
        height : 25px !important;
        left   : -10px !important;
        width  : 25px !important;
        }
    .rline img {
        left     : 60% !important;
        position : absolute;
        top      : 50%;
        width    : 25px !important;
        }
    .rline:hover {
        left : 0 !important;
        }
    #rtspiele {
        top : 140px !important;
        }
    #rtline {
        top : 200px !important;
        }
    #raline {
        top : 260px !important;
        }
    #rtline span {
        display : none;
        }
    #totop {
        height : 30px;
        width  : 20px;
        }
    #totop:before {
        border-bottom : 10px solid rgba(255, 255, 255, 0.2) !important;
        border-left   : 5px solid transparent !important;
        border-right  : 5px solid transparent !important;
        border-top    : 12px solid transparent !important;
        left          : 4px;
        top           : -1px !important;
        }
    #headline {
        line-height : normal;
        z-index     : 1000;
        }
    .headin {
        flex-flow : column;
        margin    : 0 10px;
        padding   : 5px 0;
        }
    #ticker_refresh {
        flex  : none;
        width : 100%;
        }
    #ustats {
        margin-right : 0 !important;
        }
    nav > ul {
        flex-flow : column;
        }
    nav > ul > li {
        margin : .04em 0;
        }
    #content {
        align-items : stretch;
        flex-flow   : column;
        }
    #middle, #explode {
        border-radius : 0;
        }
    #explode {
        margin : 0 5px;
        }
    footer {
        line-height : normal;
        }
    .footerin {
        flex-flow : column;
        padding   : 10px 0;
        }
    }
@media only screen and (max-width : 700px) {
    #gameedit {
        position : relative !important;
        }
    }
@media only screen and (max-width : 500px) {
    .newscontainer .nfooter {
        flex-flow       : column wrap;
        justify-content : center;
        }
    }
@media only screen and (max-width : 448px) {
    .newscontainer .newstext .nbild {
        margin : 0 0 10px 0;
        }
    #chatbox_nav {
        position : relative;
        right    : 0;
        }
    .dblinks > li {
        margin : 10px 2px;
        }
    .newscontainer h2 img {
        display : none;
        }
    }