.leftsidenav {
    padding:     0;
    margin:      0;
    list-style:  none;
    position:    fixed;
    left:        0;
    display:     flex;
    flex-flow:   column;
    align-items: flex-end;
    z-index:     1000;
    }
.leftsidenav > li {
    box-shadow:    2px 1px 5px rgba(0, 0, 0, 0.2);
    background:    rgba(0, 0, 0, .4);
    width:         100%;
    border-right:  3px solid var(--main-theme-color);
    border-radius: 0 6px 6px 0;
    margin:        10px 0;
    text-align:    right;
    position:      relative;
    left:          -160px;
    transition:    all 0.3s linear;
    }
.leftsidenav > li > a {
    display: block;
    padding: 15px;
    color:   white;
    }
.leftsidenav > li:hover {
    left:       0;
    background: rgba(0, 0, 0, .8);
    }
.leftsidenav > li > a i {
    width:          20px;
    height:         20px;
    text-align:     center;
    display:        inline-block;
    font-size:      20px;
    text-shadow:    0 1px 1px black;
    margin-left:    10px;
    vertical-align: middle;
    }
.nnav {
    padding:         0;
    margin:          0;
    list-style:      none;
    display:         flex;
    flex-flow:       row wrap;
    justify-content: center;
    }
.nnav > li a {
    position: relative;
    color:    white;
    margin:   10px;
    }
.nnav > li > a:after {
    position:  absolute;
    content:   '.';
    top:       -20.9px;
    font-size: 30px;
    right:     -15px;
    }
.nnav > li:last-child a:after {
    content: '';
    }
.votestar {
    text-align:  left;
    display:     flex;
    align-items: center;
    margin:      10px 0 -5px 0;
    font-weight: bold;
    }
.votestar > * {
    margin: 0 5px;
    }
.votestar > *.br-theme-css-stars .br-widget {
    height:     unset;
    margin-top: -5.5px;
    }
.loginstart {
    padding:    0;
    margin:     0;
    list-style: none;
    text-align: left;
    }
.djfilter {
    padding:          10px;
    display:          flex;
    flex-flow:        row wrap;
    color:            white;
    margin:           0;
    list-style:       none;
    border-radius:    10px;
    background-color: rgba(0, 0, 0, 0.5);
    }
.djfilter > li {
    flex:   1;
    margin: 10px;
    }
.djfilter > li:last-child {
    flex:       none;
    display:    block;
    width:      97.5%;
    padding:    0;
    margin:     0 0 10x 8px;
    text-align: center;
    }
.djfilter > li:last-child input[type=submit] {
    padding: 10px;
    width:   100%;
    }
.djfilter > li h4 {
    margin-top: 0;
    }
.djfilter > li select {
    width: 100%;
    }
.mainprofil {
    padding:    0;
    margin:     0;
    list-style: none;
    }
.mainprofil .xpavatar {
    margin: 0;
    }
.djvotes {
    padding:    0;
    margin:     -25px 0 0 0;
    list-style: none;
    display:    flex;
    flex-flow:  row wrap;
    }
.djvotes > li {
    width:         300px;
    position:      relative;
    margin:        20px 40px 20px 0;
    padding:       10px;
    border-radius: 4px;
    word-wrap:     break-word;
    transition:    all 0.2s linear;
    }
.djvotes > li.notactive {
    background: #ddd;
    }
.djvotes > li h4 {
    margin:    0;
    display:   flex;
    flex-flow: row wrap;
    }
.djvotes > li h4 div {
    flex: 1;
    }
.djvotes > li h4 ul {
    padding:     0;
    margin:      0;
    list-style:  none;
    display:     flex;
    align-items: center;
    }
.djvotes > li h4 ul li {
    margin: 0 5px;
    cursor: pointer;
    }
.djvotes > li h4 ul li i {
    font-size: 16px;
    }
.djvotes > li h4 *.br-theme-css-stars .br-widget {
    height:     unset;
    float:      none;
    text-align: left;
    }
.djvotes > li div i {
    display:    block;
    margin-top: 10px;
    color:      grey;
    }
.aboutdj {
    padding:          10px;
    margin:           0;
    list-style:       none;
    background-color: white;
    display:          flex;
    align-items:      flex-start;
    flex-flow:        row wrap;
    }
.aboutdj > li > img {
    max-height: 312px;
    }
.aboutdj > li + li {
    text-shadow: 0 1px 1px white;
    flex:        1;
    margin-left: 5px;
    }
.aboutdj > li + li h2 {
    border-bottom:  1px solid #ddd;
    margin:         5px 0 0 0;
    padding-bottom: 10px;
    display:        flex;
    align-items:    center;
    }
.aboutdj > li + li h2 > span {
    flex: 1;
    }
.aboutdj > li + li h2 button {
    padding:          10px;
    background-color: var(--main-theme-color);
    transition:       all 0.2s linear;
    }
.aboutdj > li + li h2 button:hover {
    background-color: #333;
    }
.aboutdj > li h1 {
    margin-top:     30px;
    padding-bottom: 10px;
    border-bottom:  1px solid #ddd;
    }
.aboutdj > li + li h1 {
    margin-top:     30px;
    padding-bottom: 10px;
    border-bottom:  1px solid #ddd;
    }
.aboutdj > li + li .profilbesch {
    line-height: 22px;
    min-height:  100px;
    }
.aboutdj > li:first-child {
    margin-right: 20px;
    }
.aboutdj > li .startpic {
    width:         100%;
    max-width:     417px;
    max-height:    312px;
    height:        100%;
    border-radius: 6px;
    margin-left:   5px;
    box-shadow:    0 0 5px #ddd;
    }
.aboutdj > li + li .djvideos {
    padding:    0;
    margin:     0;
    list-style: none;
    display:    flex;
    flex-flow:  row wrap;
    }
.aboutdj > li + li .djvideos > li {
    margin: 20px;
    }
.aboutdj > li + li .djvideos > li iframe {
    width:      100%;
    height:     100%;
    max-width:  410px !important;
    max-height: 250px !important;
    }
.djdetails {
    padding:    0;
    margin:     0;
    list-style: none;
    display:    flex;
    width:      100%;
    }
.djdetails > li {
    flex:   1;
    margin: 0 10px;
    }
.dj_sounds {
    padding:    0;
    margin:     0;
    list-style: none;
    text-align: center;
    }
.dj_sounds > li > span {
    justify-content: center;
    margin-bottom:   10px;
    display:         flex;
    align-items:     center;
    }
.dj_sounds > li > span .button {
    margin-left:      10px;
    background-color: indianred;
    }
.dj_sounds > li:last-child {
    margin-bottom: 0;
    }
.dj_bilder {
    padding:         0;
    margin:          0;
    list-style:      none;
    display:         flex;
    flex-flow:       row wrap;
    justify-content: center;
    }
.dj_bilder > li {
    position:            relative;
    width:               300px;
    height:              250px;
    margin:              10px;
    background-size:     cover !important;
    background-position: top center;
    border-radius:       4px;
    overflow:            hidden;
    }
.dj_bilder > li > a {
    position:         absolute;
    right:            -50px;
    top:              10px;
    display:          block;
    background-color: rgba(0, 0, 0, 0.6);
    padding:          10px;
    border-radius:    6px;
    transition:       all 0.2s linear;
    }
.dj_bilder > li > a + a {
    top: 60px;
    }
.dj_bilder > li > a + a > i {
    color: white;
    }
.dj_bilder > li:hover > a {
    right: 10px;
    }
.dj_bilder > li:hover > a + a {
    right: 9px;
    }
.djpics {
    margin:     0px 0;
    padding:    0;
    list-style: none;
    display:    flex;
    }
.djpics > li {
    margin: 5px;
    }
.djpics > li > a > img {
    width:         100%;
    height:        100%;
    max-width:     133px;
    max-height:    100px;
    object-fit:    cover;
    box-shadow:    0 0 5px #ddd;
    border-radius: 6px;
    }
.acentertitle {
    margin-top:     5px;
    font-size:      16px;
    display:        flex;
    align-items:    center;
    flex-flow:      row wrap;
    border-bottom:  1px solid #999;
    padding-bottom: 10px;
    }
.acentertitle > span {
    flex: 1;
    }
.acentertitle > a {
    font-weight: normal;
    }
.loginstart > li:first-child {
    margin-top: 10px;
    }
.loginstart > li {
    margin: 20px 0 10px 0;
    }
.loginstart > li h4 {
    margin: 0 0 5px 1px;
    }
.loginstart > li input {
    width: 100% !important;
    }
.loginstart > li input[type=submit] {
    padding: 10px;
    }
.djoverview {
    padding:    0;
    margin:     0;
    list-style: none;
    }
.djoverview > li {
    display:        flex;
    flex-flow:      row wrap;
    align-items:    flex-start;
    margin:         10px 0;
    border-bottom:  1px solid #ccc;
    padding-bottom: 20px;
    height:         240px;
    }
.djoverview > li > div h2 {
    margin-top:  10px;
    display:     flex;
    align-items: center;
    }
.djoverview > li > div h2 span {
    flex: 1;
    }
.djoverview > li > div h2 .br-theme-css-stars .br-widget {
    height: unset !important;
    }
.djoverview > li > div:first-child {
    width:        306px;
    margin-right: 30px;
    text-align:   center;
    align-self:   center;
    }
.djoverview > li > div > a img {
    width:         100%;
    box-shadow:    0 0 5px #ddd;
    border-radius: 6px;
    max-height:    230px;
    }
.djoverview > li > div:nth-child(2) {
    display:   flex;
    flex-flow: column;
    height:    100%;
    flex:      3;
    }
.djoverview > li > div:nth-child(2) > span {
    display: block;
    flex:    1;
    }
.djoverview > li > div:nth-child(3) ul {
    padding:    0;
    margin:     0;
    list-style: none;
    }
.djoverview > li > div:nth-child(3) ul + ul {
    margin-top: 20px;
    text-align: left;
    }
.djoverview > li > div:nth-child(3) ul + ul > li {
    margin: 30px 0;
    }
.djoverview > li > div:nth-child(3) {
    width:       200px;
    flex:        1;
    margin-left: 20px;
    }
.djoverview > li > div:nth-child(3) > ul:nth-child(1) {
    display:     flex;
    align-items: center;
    }
.djoverview > li > div:nth-child(3) > ul:nth-child(1) li {
    padding:     0 20px;
    text-align:  center;
    border-left: 1px solid #ccc;
    width:       40px;
    color:       #999;
    }
.djoverview > li > div:nth-child(3) > ul:nth-child(1) li:first-child {
    border-left:  none;
    padding-left: 0;
    }
.djoverview > li > div:nth-child(3) > ul:nth-child(1) li > i {
    font-size: 30px;
    display:   block;
    }
.findsucheh2 {
    margin:         0 0 20px 0;
    border-bottom:  1px solid #ccc;
    padding-bottom: 10px;
    font-size:      16px;
    }
.grecaptcha-badge {
    visibility: hidden;
    }
.flag-icon-background {
    background-position: 50%;
    background-repeat:   no-repeat;
    background-size:     contain;
    }
.flag-icon {
    background-position: 50%;
    background-repeat:   no-repeat;
    background-size:     contain;
    display:             inline-block;
    line-height:         2em;
    position:            relative;
    width:               1.5em;
    }
.flag-icon:before {
    content: '\00a0'
    }
.flag-icon-arab {
    background-image: url(flags/arab.svg)
    }
.flag-icon-ptbr {
    background-image: url(flags/ptbr.svg)
    }
.flag-icon-ad {
    background-image: url(flags/ad.svg)
    }
.flag-icon-ae {
    background-image: url(flags/ae.svg)
    }
.flag-icon-af {
    background-image: url(flags/af.svg)
    }
.flag-icon-ag {
    background-image: url(flags/ag.svg)
    }
.flag-icon-ai {
    background-image: url(flags/ai.svg)
    }
.flag-icon-al {
    background-image: url(flags/al.svg)
    }
.flag-icon-am {
    background-image: url(flags/am.svg)
    }
.flag-icon-ao {
    background-image: url(flags/ao.svg)
    }
.flag-icon-aq {
    background-image: url(flags/aq.svg)
    }
.flag-icon-ar {
    background-image: url(flags/ar.svg)
    }
.flag-icon-as {
    background-image: url(flags/as.svg)
    }
.flag-icon-at {
    background-image: url(flags/at.svg)
    }
.flag-icon-au {
    background-image: url(flags/au.svg)
    }
.flag-icon-aw {
    background-image: url(flags/aw.svg)
    }
.flag-icon-ax {
    background-image: url(flags/ax.svg)
    }
.flag-icon-az {
    background-image: url(flags/az.svg)
    }
.flag-icon-ba {
    background-image: url(flags/ba.svg)
    }
.flag-icon-bb {
    background-image: url(flags/bb.svg)
    }
.flag-icon-bd {
    background-image: url(flags/bd.svg)
    }
.flag-icon-be {
    background-image: url(flags/be.svg)
    }
.flag-icon-bf {
    background-image: url(flags/bf.svg)
    }
.flag-icon-bg {
    background-image: url(flags/bg.svg)
    }
.flag-icon-bh {
    background-image: url(flags/bh.svg)
    }
.flag-icon-bi {
    background-image: url(flags/bi.svg)
    }
.flag-icon-bj {
    background-image: url(flags/bj.svg)
    }
.flag-icon-bl {
    background-image: url(flags/bl.svg)
    }
.flag-icon-bm {
    background-image: url(flags/bm.svg)
    }
.flag-icon-bn {
    background-image: url(flags/bn.svg)
    }
.flag-icon-bo {
    background-image: url(flags/bo.svg)
    }
.flag-icon-bq {
    background-image: url(flags/bq.svg)
    }
.flag-icon-br {
    background-image: url(flags/br.svg)
    }
.flag-icon-bs {
    background-image: url(flags/bs.svg)
    }
.flag-icon-bt {
    background-image: url(flags/bt.svg)
    }
.flag-icon-bv {
    background-image: url(flags/bv.svg)
    }
.flag-icon-bw {
    background-image: url(flags/bw.svg)
    }
.flag-icon-by {
    background-image: url(flags/by.svg)
    }
.flag-icon-bz {
    background-image: url(flags/bz.svg)
    }
.flag-icon-ca {
    background-image: url(flags/ca.svg)
    }
.flag-icon-cc {
    background-image: url(flags/cc.svg)
    }
.flag-icon-cd {
    background-image: url(flags/cd.svg)
    }
.flag-icon-cf {
    background-image: url(flags/cf.svg)
    }
.flag-icon-cg {
    background-image: url(flags/cg.svg)
    }
.flag-icon-ch {
    background-image: url(flags/ch.svg)
    }
.flag-icon-ci {
    background-image: url(flags/ci.svg)
    }
.flag-icon-ck {
    background-image: url(flags/ck.svg)
    }
.flag-icon-cl {
    background-image: url(flags/cl.svg)
    }
.flag-icon-cm {
    background-image: url(flags/cm.svg)
    }
.flag-icon-cn {
    background-image: url(flags/cn.svg)
    }
.flag-icon-co {
    background-image: url(flags/co.svg)
    }
.flag-icon-cr {
    background-image: url(flags/cr.svg)
    }
.flag-icon-cu {
    background-image: url(flags/cu.svg)
    }
.flag-icon-cv {
    background-image: url(flags/cv.svg)
    }
.flag-icon-cw {
    background-image: url(flags/cw.svg)
    }
.flag-icon-cx {
    background-image: url(flags/cx.svg)
    }
.flag-icon-cy {
    background-image: url(flags/cy.svg)
    }
.flag-icon-cz {
    background-image: url(flags/cz.svg)
    }
.flag-icon-de {
    background-image: url(flags/de.svg)
    }
.flag-icon-dj {
    background-image: url(flags/dj.svg)
    }
.flag-icon-dk {
    background-image: url(flags/dk.svg)
    }
.flag-icon-dm {
    background-image: url(flags/dm.svg)
    }
.flag-icon-do {
    background-image: url(flags/do.svg)
    }
.flag-icon-dz {
    background-image: url(flags/dz.svg)
    }
.flag-icon-ec {
    background-image: url(flags/ec.svg)
    }
.flag-icon-ee {
    background-image: url(flags/ee.svg)
    }
.flag-icon-eg {
    background-image: url(flags/eg.svg)
    }
.flag-icon-eh {
    background-image: url(flags/eh.svg)
    }
.flag-icon-er {
    background-image: url(flags/er.svg)
    }
.flag-icon-es {
    background-image: url(flags/es.svg)
    }
.flag-icon-et {
    background-image: url(flags/et.svg)
    }
.flag-icon-fi {
    background-image: url(flags/fi.svg)
    }
.flag-icon-fj {
    background-image: url(flags/fj.svg)
    }
.flag-icon-fk {
    background-image: url(flags/fk.svg)
    }
.flag-icon-fm {
    background-image: url(flags/fm.svg)
    }
.flag-icon-fo {
    background-image: url(flags/fo.svg)
    }
.flag-icon-fr {
    background-image: url(flags/fr.svg)
    }
.flag-icon-ga {
    background-image: url(flags/ga.svg)
    }
.flag-icon-gb {
    background-image: url(flags/gb.svg)
    }
.flag-icon-gd {
    background-image: url(flags/gd.svg)
    }
.flag-icon-ge {
    background-image: url(flags/ge.svg)
    }
.flag-icon-gf {
    background-image: url(flags/gf.svg)
    }
.flag-icon-gg {
    background-image: url(flags/gg.svg)
    }
.flag-icon-gh {
    background-image: url(flags/gh.svg)
    }
.flag-icon-gi {
    background-image: url(flags/gi.svg)
    }
.flag-icon-gl {
    background-image: url(flags/gl.svg)
    }
.flag-icon-gm {
    background-image: url(flags/gm.svg)
    }
.flag-icon-gn {
    background-image: url(flags/gn.svg)
    }
.flag-icon-gp {
    background-image: url(flags/gp.svg)
    }
.flag-icon-gq {
    background-image: url(flags/gq.svg)
    }
.flag-icon-gr {
    background-image: url(flags/gr.svg)
    }
.flag-icon-gs {
    background-image: url(flags/gs.svg)
    }
.flag-icon-gt {
    background-image: url(flags/gt.svg)
    }
.flag-icon-gu {
    background-image: url(flags/gu.svg)
    }
.flag-icon-gw {
    background-image: url(flags/gw.svg)
    }
.flag-icon-gy {
    background-image: url(flags/gy.svg)
    }
.flag-icon-hk {
    background-image: url(flags/hk.svg)
    }
.flag-icon-hm {
    background-image: url(flags/hm.svg)
    }
.flag-icon-hn {
    background-image: url(flags/hn.svg)
    }
.flag-icon-hr {
    background-image: url(flags/hr.svg)
    }
.flag-icon-ht {
    background-image: url(flags/ht.svg)
    }
.flag-icon-hu {
    background-image: url(flags/hu.svg)
    }
.flag-icon-id {
    background-image: url(flags/id.svg)
    }
.flag-icon-ie {
    background-image: url(flags/ie.svg)
    }
.flag-icon-il {
    background-image: url(flags/il.svg)
    }
.flag-icon-im {
    background-image: url(flags/im.svg)
    }
.flag-icon-in {
    background-image: url(flags/in.svg)
    }
.flag-icon-io {
    background-image: url(flags/io.svg)
    }
.flag-icon-iq {
    background-image: url(flags/iq.svg)
    }
.flag-icon-ir {
    background-image: url(flags/ir.svg)
    }
.flag-icon-is {
    background-image: url(flags/is.svg)
    }
.flag-icon-it {
    background-image: url(flags/it.svg)
    }
.flag-icon-je {
    background-image: url(flags/je.svg)
    }
.flag-icon-jm {
    background-image: url(flags/jm.svg)
    }
.flag-icon-jo {
    background-image: url(flags/jo.svg)
    }
.flag-icon-jp {
    background-image: url(flags/jp.svg)
    }
.flag-icon-ke {
    background-image: url(flags/ke.svg)
    }
.flag-icon-kg {
    background-image: url(flags/kg.svg)
    }
.flag-icon-kh {
    background-image: url(flags/kh.svg)
    }
.flag-icon-ki {
    background-image: url(flags/ki.svg)
    }
.flag-icon-km {
    background-image: url(flags/km.svg)
    }
.flag-icon-kn {
    background-image: url(flags/kn.svg)
    }
.flag-icon-kp {
    background-image: url(flags/kp.svg)
    }
.flag-icon-kr {
    background-image: url(flags/kr.svg)
    }
.flag-icon-kw {
    background-image: url(flags/kw.svg)
    }
.flag-icon-ky {
    background-image: url(flags/ky.svg)
    }
.flag-icon-kz {
    background-image: url(flags/kz.svg)
    }
.flag-icon-la {
    background-image: url(flags/la.svg)
    }
.flag-icon-lb {
    background-image: url(flags/lb.svg)
    }
.flag-icon-lc {
    background-image: url(flags/lc.svg)
    }
.flag-icon-li {
    background-image: url(flags/li.svg)
    }
.flag-icon-lk {
    background-image: url(flags/lk.svg)
    }
.flag-icon-lr {
    background-image: url(flags/lr.svg)
    }
.flag-icon-ls {
    background-image: url(flags/ls.svg)
    }
.flag-icon-lt {
    background-image: url(flags/lt.svg)
    }
.flag-icon-lu {
    background-image: url(flags/lu.svg)
    }
.flag-icon-lv {
    background-image: url(flags/lv.svg)
    }
.flag-icon-ly {
    background-image: url(flags/ly.svg)
    }
.flag-icon-ma {
    background-image: url(flags/ma.svg)
    }
.flag-icon-mc {
    background-image: url(flags/mc.svg)
    }
.flag-icon-md {
    background-image: url(flags/md.svg)
    }
.flag-icon-me {
    background-image: url(flags/me.svg)
    }
.flag-icon-mf {
    background-image: url(flags/mf.svg)
    }
.flag-icon-mg {
    background-image: url(flags/mg.svg)
    }
.flag-icon-mh {
    background-image: url(flags/mh.svg)
    }
.flag-icon-mk {
    background-image: url(flags/mk.svg)
    }
.flag-icon-ml {
    background-image: url(flags/ml.svg)
    }
.flag-icon-mm {
    background-image: url(flags/mm.svg)
    }
.flag-icon-mn {
    background-image: url(flags/mn.svg)
    }
.flag-icon-mo {
    background-image: url(flags/mo.svg)
    }
.flag-icon-mp {
    background-image: url(flags/mp.svg)
    }
.flag-icon-mq {
    background-image: url(flags/mq.svg)
    }
.flag-icon-mr {
    background-image: url(flags/mr.svg)
    }
.flag-icon-ms {
    background-image: url(flags/ms.svg)
    }
.flag-icon-mt {
    background-image: url(flags/mt.svg)
    }
.flag-icon-mu {
    background-image: url(flags/mu.svg)
    }
.flag-icon-mv {
    background-image: url(flags/mv.svg)
    }
.flag-icon-mw {
    background-image: url(flags/mw.svg)
    }
.flag-icon-mx {
    background-image: url(flags/mx.svg)
    }
.flag-icon-my {
    background-image: url(flags/my.svg)
    }
.flag-icon-mz {
    background-image: url(flags/mz.svg)
    }
.flag-icon-na {
    background-image: url(flags/na.svg)
    }
.flag-icon-nc {
    background-image: url(flags/nc.svg)
    }
.flag-icon-ne {
    background-image: url(flags/ne.svg)
    }
.flag-icon-nf {
    background-image: url(flags/nf.svg)
    }
.flag-icon-ng {
    background-image: url(flags/ng.svg)
    }
.flag-icon-ni {
    background-image: url(flags/ni.svg)
    }
.flag-icon-nl {
    background-image: url(flags/nl.svg)
    }
.flag-icon-no {
    background-image: url(flags/no.svg)
    }
.flag-icon-np {
    background-image: url(flags/np.svg)
    }
.flag-icon-nr {
    background-image: url(flags/nr.svg)
    }
.flag-icon-nu {
    background-image: url(flags/nu.svg)
    }
.flag-icon-nz {
    background-image: url(flags/nz.svg)
    }
.flag-icon-om {
    background-image: url(flags/om.svg)
    }
.flag-icon-pa {
    background-image: url(flags/pa.svg)
    }
.flag-icon-pe {
    background-image: url(flags/pe.svg)
    }
.flag-icon-pf {
    background-image: url(flags/pf.svg)
    }
.flag-icon-pg {
    background-image: url(flags/pg.svg)
    }
.flag-icon-ph {
    background-image: url(flags/ph.svg)
    }
.flag-icon-pk {
    background-image: url(flags/pk.svg)
    }
.flag-icon-pl {
    background-image: url(flags/pl.svg)
    }
.flag-icon-pm {
    background-image: url(flags/pm.svg)
    }
.flag-icon-pn {
    background-image: url(flags/pn.svg)
    }
.flag-icon-pr {
    background-image: url(flags/pr.svg)
    }
.flag-icon-ps {
    background-image: url(flags/ps.svg)
    }
.flag-icon-pt {
    background-image: url(flags/pt.svg)
    }
.flag-icon-pw {
    background-image: url(flags/pw.svg)
    }
.flag-icon-py {
    background-image: url(flags/py.svg)
    }
.flag-icon-qa {
    background-image: url(flags/qa.svg)
    }
.flag-icon-re {
    background-image: url(flags/re.svg)
    }
.flag-icon-ro {
    background-image: url(flags/ro.svg)
    }
.flag-icon-rs {
    background-image: url(flags/rs.svg)
    }
.flag-icon-ru {
    background-image: url(flags/ru.svg)
    }
.flag-icon-rw {
    background-image: url(flags/rw.svg)
    }
.flag-icon-sa {
    background-image: url(flags/sa.svg)
    }
.flag-icon-sb {
    background-image: url(flags/sb.svg)
    }
.flag-icon-sc {
    background-image: url(flags/sc.svg)
    }
.flag-icon-sd {
    background-image: url(flags/sd.svg)
    }
.flag-icon-se {
    background-image: url(flags/se.svg)
    }
.flag-icon-sg {
    background-image: url(flags/sg.svg)
    }
.flag-icon-sh {
    background-image: url(flags/sh.svg)
    }
.flag-icon-si {
    background-image: url(flags/si.svg)
    }
.flag-icon-sj {
    background-image: url(flags/sj.svg)
    }
.flag-icon-sk {
    background-image: url(flags/sk.svg)
    }
.flag-icon-sl {
    background-image: url(flags/sl.svg)
    }
.flag-icon-sm {
    background-image: url(flags/sm.svg)
    }
.flag-icon-sn {
    background-image: url(flags/sn.svg)
    }
.flag-icon-so {
    background-image: url(flags/so.svg)
    }
.flag-icon-sr {
    background-image: url(flags/sr.svg)
    }
.flag-icon-ss {
    background-image: url(flags/ss.svg)
    }
.flag-icon-st {
    background-image: url(flags/st.svg)
    }
.flag-icon-sv {
    background-image: url(flags/sv.svg)
    }
.flag-icon-sx {
    background-image: url(flags/sx.svg)
    }
.flag-icon-sy {
    background-image: url(flags/sy.svg)
    }
.flag-icon-sz {
    background-image: url(flags/sz.svg)
    }
.flag-icon-tc {
    background-image: url(flags/tc.svg)
    }
.flag-icon-td {
    background-image: url(flags/td.svg)
    }
.flag-icon-tf {
    background-image: url(flags/tf.svg)
    }
.flag-icon-tg {
    background-image: url(flags/tg.svg)
    }
.flag-icon-th {
    background-image: url(flags/th.svg)
    }
.flag-icon-tj {
    background-image: url(flags/tj.svg)
    }
.flag-icon-tk {
    background-image: url(flags/tk.svg)
    }
.flag-icon-tl {
    background-image: url(flags/tl.svg)
    }
.flag-icon-tm {
    background-image: url(flags/tm.svg)
    }
.flag-icon-tn {
    background-image: url(flags/tn.svg)
    }
.flag-icon-to {
    background-image: url(flags/to.svg)
    }
.flag-icon-tr {
    background-image: url(flags/tr.svg)
    }
.flag-icon-tt {
    background-image: url(flags/tt.svg)
    }
.flag-icon-tv {
    background-image: url(flags/tv.svg)
    }
.flag-icon-tw {
    background-image: url(flags/tw.svg)
    }
.flag-icon-tz {
    background-image: url(flags/tz.svg)
    }
.flag-icon-ua {
    background-image: url(flags/ua.svg)
    }
.flag-icon-ug {
    background-image: url(flags/ug.svg)
    }
.flag-icon-um {
    background-image: url(flags/um.svg)
    }
.flag-icon-us {
    background-image: url(flags/us.svg)
    }
.flag-icon-uy {
    background-image: url(flags/uy.svg)
    }
.flag-icon-uz {
    background-image: url(flags/uz.svg)
    }
.flag-icon-va {
    background-image: url(flags/va.svg)
    }
.flag-icon-vc {
    background-image: url(flags/vc.svg)
    }
.flag-icon-ve {
    background-image: url(flags/ve.svg)
    }
.flag-icon-vg {
    background-image: url(flags/vg.svg)
    }
.flag-icon-vi {
    background-image: url(flags/vi.svg)
    }
.flag-icon-vn {
    background-image: url(flags/vn.svg)
    }
.flag-icon-vu {
    background-image: url(flags/vu.svg)
    }
.flag-icon-wf {
    background-image: url(flags/wf.svg)
    }
.flag-icon-ws {
    background-image: url(flags/ws.svg)
    }
.flag-icon-ye {
    background-image: url(flags/ye.svg)
    }
.flag-icon-yt {
    background-image: url(flags/yt.svg)
    }
.flag-icon-za {
    background-image: url(flags/za.svg)
    }
.flag-icon-zm {
    background-image: url(flags/zm.svg)
    }
.flag-icon-zw {
    background-image: url(flags/zw.svg)
    }
.flag-icon-es-ca {
    background-image: url(flags/es-ca.svg)
    }
.flag-icon-es-ga {
    background-image: url(flags/es-ga.svg)
    }
.flag-icon-eu {
    background-image: url(flags/eu.svg)
    }
.flag-icon-gb-eng {
    background-image: url(flags/gb-eng.svg)
    }
.flag-icon-gb-nir {
    background-image: url(flags/gb-nir.svg)
    }
.flag-icon-gb-sct {
    background-image: url(flags/gb-sct.svg)
    }
.flag-icon-gb-wls {
    background-image: url(flags/gb-wls.svg)
    }
.flag-icon-un {
    background-image: url(flags/un.svg)
    }
.flag-icon-xk {
    background-image: url(flags/xk.svg)
    }
.ts_showright {
    line-height: 20px;
    white-space: pre-wrap;
    }
.sinnloscontainer {
    display:         flex;
    flex-flow:       row wrap;
    justify-content: center;
    list-style:      none;
    margin:          0;
    padding:         0;
    }
.sinnloscontainer > * h2 {
    font-size:   14px;
    font-weight: normal;
    margin:      0 0 10px 0;
    padding:     5px 10px;
    text-align:  center;
    }
.sinnloscontainer > * {
    border:  1px solid #ccc;
    display: flex;
    height:  140px;
    margin:  30px;
    padding: 20px 10px 10px 10px;
    width:   150px;
    }
.sinnloscontainer > * .sinnlosflex {
    flex: 1;
    }
.sinnloscontainer > * .sinnlosflex > ul {
    cursor:          pointer;
    display:         flex;
    font-size:       20px;
    justify-content: center;
    list-style:      none;
    margin:          20px 0 0 0;
    padding:         0;
    }
.sinnloscontainer > * .sinnlosflex > ul > * {
    margin: 0 5px;
    }
.sinnloscontainer > * .sinnlosskala:before {
    content:   '100%';
    font-size: 9px;
    left:      -3px;
    position:  absolute;
    top:       -15px;
    }
.sinnloscontainer > * .sinnlosskala {
    border:   1px solid #333;
    position: relative;
    width:    15px;
    }
.sinnloscontainer > * .sinnlosskala > span {
    background: red;
    bottom:     1px;
    display:    block;
    left:       2px;
    position:   absolute;
    width:      12px;
    }
.sinnloscontainer > * .sinnlosskala > span > i {
    bottom:     0px;
    font-size:  9px;
    font-style: normal;
    left:       -20px;
    position:   absolute;
    }
.sinnlosinfoul {
    list-style: none;
    margin:     0;
    padding:    0;
    }
.sinnlosinfoul li:first-child {
    margin-top: 0;
    }
.sinnlosinfoul li {
    border-bottom: 1px solid #ddd;
    margin:        5px 0;
    padding:       10px;
    }
.sinnlosinfoul li:last-child {
    border-bottom:  0;
    padding-bottom: 0;
    }
.insert-comment-details {
    display:    flex;
    margin-top: 20px;
    }
.insert-comment-details > div {
    position: relative;
    }
[contenteditable=true]:empty:before {
    color:          gray;
    content:        attr(placeholder);
    display:        block;
    pointer-events: none;
    }
.globallikedel {
    cursor: pointer;
    }
.globallikes {
    align-items:   center;
    background:    linear-gradient(to bottom, #dadada 0%, #e5e5e5 100%);
    border-radius: 4px;
    box-shadow:    inset 0 4px 0 #e8e8e8;
    display:       none;
    flex-flow:     row wrap;
    font-size:     12px;
    margin:        10px auto;
    padding:       10px;
    position:      relative;
    text-shadow:   0 1px 1px white;
    width:         90%;
    }
.globallikes > ul {
    display:    flex;
    flex-flow:  row wrap;
    list-style: none;
    margin:     0 0 0 10px;
    padding:    0;
    }
table {
    /*border-collapse : collapse;*/
    border-spacing: 0;
    }
body {
    background-color: #e9e9e9;
    background-size:  cover;
    font-family:      Verdana, Helvetica, Arial, sans-serif;
    font-size:        13px;
    margin:           0 20px;
    min-width:        320px;
    color:            black;
    min-height:       100vh;
    min-height:       -webkit-fill-available;
    }
body.shownav {
    overflow: hidden;
    }
.guestmsg {
    position:      fixed;
    z-index:       1000;
    max-width:     500px;
    width:         100%;
    line-height:   20px;
    color:         white;
    background:    #272626ed;
    padding:       12px;
    word-wrap:     break-word;
    border-radius: 4px;
    left:          50%;
    transform:     translate(-50%, -50%);
    border:        3px solid var(--main-theme-color);
    text-align:    center;
    box-shadow:    0 0 10px rgba(0, 0, 0, 0.7);
    }
.closeguestmsg {
    position:    absolute;
    right:       5px;
    top:         5px;
    width:       20px;
    height:      20px;
    cursor:      pointer;
    font-size:   15px;
    user-select: none;
    }
.sysicon {
    font-size: 14px;
    }
.sysicon.fa-trash {
    color: indianred;
    }
.bigsysicon {
    font-size:  20px;
    transition: color 0.3s linear;
    }
.bigsysicon.fa-mars {
    color: #74b9ff;
    }
.bigsysicon.fa-venus {
    color: #fd79a8;
    }
.bigsysicon.fa-comments {
    color: var(--main-theme-color);
    }
.bigsysicon.fa-comments:hover {
    color: grey;
    }
.mainbutton {
    align-items:   center;
    background:    var(--main-theme-color);
    border-radius: 2px;
    box-sizing:    border-box;
    color:         #fff;
    line-height:   normal;
    padding:       4px;
    text-shadow:   none;
    }
.maintance {
    background:  rgba(0, 0, 0, 0.6);
    color:       white;
    font-size:   16px;
    line-height: 30px;
    padding:     10px;
    text-align:  center;
    }
#noscript {
    background-color: red;
    font-size:        20px;
    font-weight:      bold;
    padding:          50px;
    position:         fixed;
    text-align:       center;
    top:              0;
    width:            100%;
    z-index:          1000;
    }
.bbcode_table {
    table-layout: fixed !important;
    width:        100%;
    }
.bbcode_table > tr {
    backface-visibility: hidden;
    }
.bbcode_table tr td {
    border-bottom:  1px solid #ddd;
    border-left:    1px solid #e9ebee;
    border-right:   1px solid #e9ebee;
    border-top:     1px solid #ddd;
    padding:        10px;
    vertical-align: middle;
    }
#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;
    }
#video_container {
    left:       0;
    min-height: 100%;
    min-width:  101%;
    height:     100%;
    width:      100%;
    position:   fixed;
    top:        0;
    z-index:    -2;
    }
@keyframes fin {
    0% {
        opacity: 0;
        }
    100% {
        opacity: 1;
        }
    }
#video_container video {
    animation:  fin 1s linear !important;
    object-fit: cover;
    width:      100% !important;
    height:     100% !important;
    }
.fancybox {
    overflow: visible !important;
    }
.fancybox-progress {
    background-color: var(--main-theme-color);
    }
.fancybox-thumbs__list a:before {
    border: 6px solid var(--main-theme-color);
    }
a {
    outline: 0 !important;
    }
a:active,
a:link,
a:visited {
    color:           #222;
    text-decoration: none;
    transition:      color 0.3s linear;
    }
a:hover {
    color: var(--main-theme-color);
    }
.radio_switch {
    padding:       0 1rem;
    position:      relative;
    border-radius: 30px;
    user-select:   none;
    }
.radio_switch__label {
    cursor:     pointer;
    display:    inline-block;
    padding:    10px;
    text-align: center;
    transition: color 200ms ease-out;
    }
.radio_switch__label:hover {
    color: var(--main-theme-color);
    }
.radio_switch__indicator {
    border-bottom: 10px solid green;
    border-left:   10px solid transparent;
    border-right:  10px solid transparent;
    border-top:    10px solid transparent;
    bottom:        0;
    content:       '';
    height:        0;
    left:          0;
    position:      absolute;
    transform:     translate3d(1rem, 0, 0);
    transition:    transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);
    width:         0;
    }
.radio_switch input[type=radio]:not(:checked),
.radio_switch input[type=radio]:checked {
    display: none;
    }
.xswitch {
    cursor:         pointer;
    display:        inline-flex;
    vertical-align: middle;
    }
.xswitch input {
    display: none;
    }
.xswitch .buttonbackground:hover {
    cursor: pointer;
    }
.xswitch .buttonbackground {
    width:            30px;
    border-radius:    10px;
    padding:          0 !important;
    background-color: #ccc;
    height:           10px;
    margin:           0;
    display:          inline-flex;
    align-self:       center;
    }
.xswitch input:checked + .buttonbackground {
    background-color: #64b464;
    }
.xswitch .buttonslider {
    border:           1px solid #aaa;
    background-color: #ddd;
    border-radius:    50%;
    display:          block;
    position:         relative;
    box-sizing:       border-box !important;
    top:              -2.5px;
    height:           14px !important;
    transition:       all 0.2s ease;
    width:            14px !important;
    }
.xswitch input:checked + .buttonbackground .buttonslider {
    background-color: #eee;
    transform:        translate(115%, 0);
    }
input[type=date],
input[type=time] {
    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,
a.button {
    border:          1px solid #cccccc;
    border-radius:   2px;
    box-sizing:      border-box;
    color:           #222222;
    font-family:     Verdana, Helvetica, Arial, sans-serif;
    font-size:       12px;
    padding:         6px;
    resize:          vertical;
    text-decoration: none;
    outline:         none;
    }
a.button {
    user-select: none;
    }
input[type=submit],
input[type=button],
button,
a.button,
.shfbutton {
    background-color: #333;
    border:           0;
    font-size:        13px;
    box-sizing:       border-box;
    color:            white !important;
    cursor:           pointer;
    display:          inline-block;
    }
input[type=submit].disabled {
    background-color: #666;
    cursor:           not-allowed;
    }
input[type=submit]:active,
input[type=button]:active,
button:active,
a.button:active,
.shfbutton:active {
    background-color: var(--main-theme-color);
    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 6px 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-color: var(--main-theme-color);
    color:            white;
    }
.clear {
    clear: both;
    }
.xsearchinput {
    margin:   0 auto;
    position: relative;
    width:    90%;
    }
.xsearchinput > input {
    width: 100%;
    }
.xsearchinput > button {
    background: none;
    color:      #222 !important;
    font-size:  13px;
    padding:    4px !important;
    position:   absolute;
    right:      5px;
    top:        0;
    }
.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;
    }
.mainnav {
    height:  63px;
    z-index: 147;
    display: none;
    }
.mainnav.sticky {
    position: sticky;
    top:      56px;
    }
.mainnav.sticky nav {
    border-radius: 0 !important;
    box-shadow:    1px 3px 12px rgba(0, 0, 0, 0.6);
    height:        60px;
    }
body.fullscreensite .mainnav.sticky nav {
    left:      0;
    max-width: 100%;
    transform: none;
    }
.mainnav.sticky nav > ul > li:first-child > a:before,
.mainnav.sticky nav > ul > li:last-child > a:before {
    border-radius: 0;
    }
.maintitle {
    align-items:   center;
    border-bottom: 1px solid #ddd;
    display:       flex;
    flex-flow:     row wrap;
    list-style:    none;
    margin:        0 0 10px 0;
    padding:       0 0 10px 0;
    }
.maintitle > *:first-child {
    flex: 1;
    }
.maintitle > li.h2 > ul {
    display:    flex;
    flex-flow:  row wrap;
    list-style: none;
    margin:     0;
    padding:    0;
    }
.maintitle > li.h2 > ul > * {
    margin-right: 10px;
    }
nav {
    backface-visibility: hidden;
    background-color:    #2b2b2b;
    border-bottom:       3px solid var(--main-theme-color);
    bottom:              0;
    color:               white;
    left:                -13.5px;
    position:            relative;
    user-select:         none;
    width:               102%;
    }
nav:before {
    border-bottom: 20px solid transparent;
    border-left:   14px solid transparent;
    border-right:  0 solid transparent;
    border-top:    6px solid #2b2b2b;
    bottom:        -29px;
    content:       '';
    height:        0;
    left:          0;
    position:      absolute;
    width:         0;
    }
nav:after {
    border-bottom: 20px solid transparent;
    border-left:   0 solid transparent;
    border-right:  14px solid transparent;
    border-top:    6px solid #2b2b2b;
    bottom:        -29px;
    content:       '';
    height:        0;
    position:      absolute;
    right:         0;
    width:         0;
    }
@-moz-document url-prefix() {
    nav:before {
        border-bottom: 20px solid transparent;
        border-left:   15px solid transparent;
        border-right:  0 solid transparent;
        border-top:    6px solid #2b2b2b;
        bottom:        -28px;
        content:       '';
        height:        0;
        left:          0;
        position:      absolute;
        width:         0;
        }
    nav:after {
        border-bottom: 20px solid transparent;
        border-left:   0 solid transparent;
        border-right:  15px solid transparent;
        border-top:    6px solid #2b2b2b;
        bottom:        -28px;
        content:       '';
        height:        0;
        position:      absolute;
        right:         0;
        width:         0;
        }
    }
body.fullscreensite nav {
    left:  0;
    width: 100%;
    }
body.fullscreensite nav:before,
body.fullscreensite nav:after {
    display: none;
    }
nav.select {
    top:        0;
    transition: top 0.2s linear !important;
    }
nav.sticky {
    border-radius: 0 !important;
    box-shadow:    1px 3px 12px rgba(0, 0, 0, 0.6);
    height:        60px;
    left:          50%;
    max-width:     1429px;
    position:      fixed;
    top:           55px;
    transform:     translate(-50%, 0);
    }
body.fullscreensite nav.sticky {
    left:      0;
    max-width: 100%;
    transform: none;
    }
nav > ul {
    align-items:         stretch;
    backface-visibility: hidden;
    display:             flex;
    flex-flow:           row wrap;
    justify-content:     space-between;
    list-style:          none;
    margin:              0;
    padding:             0;
    }
nav > ul > * {
    flex:         1 auto;
    margin-right: 2px;
    }
nav > ul > *:last-child {
    margin-right: 0;
    }
nav > ul > li {
    cursor:     pointer;
    position:   relative;
    text-align: center;
    }
nav > ul > li > a.playersonline:after {
    position:         absolute;
    content:          '';
    width:            12px;
    height:           12px;
    background-color: red;
    top:              10px;
    right:            10px;
    border-radius:    100%;
    animation:        nowliveplayers 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
@keyframes nowliveplayers {
    0% {
        background-color: red;
        }
    50% {
        background-color: transparent;
        }
    100% {
        background-color: red;
        }
    }
nav > ul > li:last-child {
    margin-right: 0;
    }
nav > ul li a {
    color:       white !important;
    display:     block;
    font-size:   13px;
    line-height: normal;
    padding:     10px 0;
    position:    relative;
    text-shadow: 0 1px 1px black;
    transform:   perspective(1px) translateZ(0);
    transition:  all 0.2s linear !important;
    }
nav > ul li a span:active {
    position:         absolute;
    top:              10px;
    right:            10px;
    width:            12px;
    height:           12px;
    background-color: red;
    border-radius:    100%;
    }
nav > ul li a i {
    display:   block !important;
    font-size: 20px;
    margin:    0 0 5px 0;
    }
nav > ul > li:first-child > a {
    border-radius: 10px 0 0 0;
    }
nav > ul > li:last-child > a {
    border-radius: 0 10px 0 0;
    }
nav > ul > li > a {
    background: linear-gradient(to top, #222, #2c2b2b);
    }
nav > ul li a:before {
    background-color:            var(--main-theme-color);
    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:first-child > a:before {
    border-radius: 10px 0 0 0;
    }
nav > ul > li:last-child > a:before {
    border-radius: 0 10px 0 0;
    }
nav.select > ul > li:first-child > a:before,
nav.select > ul > li:last-child > a:before {
    border-radius: 0;
    }
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.03);
    }
nav > ul > li:after {
    bottom:   -3px;
    content:  '';
    height:   3px;
    left:     0;
    position: absolute;
    width:    100%;
    }
nav > ul > li > ul {
    background:    linear-gradient(to top, #222, #2c2b2b);
    border:        0 solid #222 !important;
    border-radius: 0 0 6px 6px;
    box-shadow:    0 10px 15px rgba(0, 0, 0, 0.5);
    box-sizing:    border-box;
    list-style:    none;
    margin:        0;
    min-width:     100%;
    opacity:       0;
    overflow:      hidden;
    padding:       0;
    position:      absolute;
    right:         0;
    top:           63px;
    visibility:    hidden;
    z-index:       100;
    }
nav > ul > li > ul > li > a {
    border-bottom: 1px solid #333;
    box-sizing:    border-box;
    font-size:     13px;
    padding:       5px 25px 5px 10px;
    text-align:    left;
    white-space:   nowrap;
    }
nav > ul > li > ul > li:last-child > a {
    border-bottom: 0;
    border-radius: 0 0 16px 6px !important;
    }
nav > ul > li ul a i {
    display:        inline-block !important;
    font-size:      15px;
    margin-top:     4px;
    text-align:     center;
    vertical-align: middle;
    width:          30px;
    }
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;
    transition: all 0.35s ease-in-out;
    visibility: visible;
    }
.mainhmenu {
    display: none;
    height:  37px;
    z-index: 146;
    }
.mainhmenu.sticky {
    position: sticky;
    top:      118px;
    }
#hmenu {
    background-color: #222;
    border-bottom:    2px solid var(--main-theme-color);
    color:            #fff;
    padding:          10px;
    text-shadow:      0 1px 1px black;
    }
.mainhmenu.sticky #hmenu {
    box-shadow: 1px 3px 12px rgba(0, 0, 0, 0.6);
    }
#hmenu a {
    color:       white;
    text-shadow: 0 1px 1px black;
    transition:  all 0.2s linear;
    }
#hmenu a:hover {
    color: var(--main-theme-color);
    }
#headline {
    background-color: #222222;
    border-bottom:    1px solid #323232;
    box-shadow:       0 3px 12px rgba(0, 0, 0, .5);
    left:             0;
    line-height:      55px;
    min-height:       55px;
    position:         fixed;
    top:              0;
    width:            100%;
    z-index:          150;
    }
.headin {
    margin:      0 auto;
    max-width:   1400px;
    padding:     0 10px;
    position:    relative;
    width:       100%;
    display:     flex;
    flex-flow:   row wrap;
    align-items: center;
    }
.headin .inflex {
    flex: 1;
    }
body.fullscreensite .headin {
    max-width: 95%;
    }
.headin .opensidebar {
    display: none;
    }
.darkmode_switch {
    align-items: center;
    display:     flex;
    left:        400px;
    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-color: #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-color: #eee;
    left:             27px;
    }
#ustats {
    left:     0;
    position: absolute;
    }
.sliderrsp {
    display: none;
    }
#barmenu {
    align-items: center;
    color:       #ddd;
    display:     flex;
    line-height: normal;
    list-style:  none;
    margin:      0;
    padding:     0;
    position:    relative;
    }
#barmenu > li {
    border-radius: 10px;
    cursor:        pointer;
    font-size:     20px;
    height:        48px;
    line-height:   48px;
    margin:        0 10px 0 10px;
    outline:       0;
    padding:       0 10px;
    position:      relative;
    text-align:    center;
    user-select:   none;
    }
#barmenu .roblox > i {
    left: 30%;
    top:  35%;
    }
#barmenu .roblox > i.robloxicon_back {
    font-size: 28px;
    position:  relative;
    transform: rotate(20deg) translate(-50%, -50%);
    }
#barmenu .roblox i.robloxicon_front {
    color:     #333;
    font-size: 28px;
    font-size: 10px;
    left:      33%;
    position:  absolute;
    top:       33%;
    }
#barmenu > li.nowlive {
    animation: nowlive 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    color:     red;
    }
@keyframes nowlive {
    0% {
        color: red;
        }
    50% {
        color: #ddd;
        }
    100% {
        color: red;
        }
    }
#barmenu > li:hover {
    background-color: #444;
    }
#barmenu > li.select {
    background-color: #444;
    }
.roundavatar img {
    background-color: #444;
    border-radius:    100px !important;
    margin-top:       3px;
    padding:          3px;
    }
#barmenu > li ul:before {
    border-bottom: 15px solid #333;
    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:          2px 0;
    min-width:       350px;
    padding:         10px 10px 5px 10px;
    text-shadow:     0 1px 1px black;
    }
#getnotifications li:hover {
    background-color: #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: var(--main-theme-color);
    }
#getnotifications li:last-child:hover {
    background: none !important;
    }
#getnotifications.select li:not(#notfirst):not(.isread) {
    animation: warn 1s linear infinite !important;
    }
@keyframes warn {
    0% {
        color: inherit;
        }
    100% {
        color: red;
        }
    }
a.userbutton {
    background-color: #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;
    }
#anznposts.select {
    animation: blink 1s linear infinite;
    color:     red !important;
    }
@keyframes blink {
    0% {
        opacity: 1;
        }
    100% {
        opacity: 0;
        }
    }
a.userbutton:hover {
    background-color: #555;
    }
a.userbutton span {
    background-color: var(--main-theme-color);
    }
a.userbutton.logout {
    background-color: var(--main-theme-color);
    color:            white !important;
    float:            right;
    padding:          4px 8px 5px 8px;
    text-shadow:      0 1px 1px black;
    }
a.userbutton.logout:hover {
    background-color: var(--main-theme-color);
    }
a.userbutton.logout:hover > span {
    background-color: var(--main-theme-color);
    }
a.userbutton i {
    background-color: var(--main-theme-color);
    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-color: var(--main-theme-color);
    border-radius:    100px;
    color:            white;
    display:          block;
    font-size:        12px;
    font-weight:      normal;
    height:           20px;
    line-height:      20px;
    position:         relative;
    right:            -30px;
    text-shadow:      0 1px 1px black;
    top:              -43px;
    width:            20px;
    }
#anzmessage {
    top: -53px;
    }
#spieleslider {
    background-color: #111;
    border:           3px solid var(--main-theme-color);
    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-color: #111;
    border-bottom:    1px solid #333;
    border-left:      3px solid var(--main-theme-color);
    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 {
    border-bottom: 3px solid var(--main-theme-color);
    border-radius: 10px;
    box-shadow:    0 3px 5px #000000;
    box-sizing:    border-box;
    margin:        30px auto 55px auto;
    max-width:     1400px;
    position:      relative;
    }
.outer.com nav {
    border-radius: 10px 10px 0 0;
    }
body.fullscreensite .outer {
    max-width: 95%;
    }
header.xdesign {
    align-items: center;
    background:  none;
    display:     flex;
    height:      100%;
    margin:      70px auto 0 auto;
    max-width:   1400px;
    position:    relative;
    width:       100%;
    }
header.xdesign > * {
    flex: 1;
    }
header.xdesign > *.xdesign_logo {
    display:     flex;
    align-items: center;
    }
header.xdesign #logo {
    cursor: pointer;
    height: 150px;
    }
header.xdesign h2 {
    color:          var(--main-theme-color);
    cursor:         pointer;
    font-family:    tahoma, serif;
    font-size:      50px;
    font-weight:    normal;
    letter-spacing: 1px;
    position:       relative;
    margin-left:    20px;
    text-shadow:    rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px, 1px 1px 10px #000;
    z-index:        30;
    }
header.xdesign h2 span {
    color:          #bbb;
    display:        block;
    font-size:      20px;
    padding:        0 5px;
    text-align:     center;
    letter-spacing: 3px;
    }
header {
    background-size: 100% 100%;
    border-radius:   10px 10px 0 0;
    position:        relative;
    transition:      all 0.2s linear !important;
    user-select:     none;
    width:           100%;
    z-index:         106;
    }
header.shadow {
    z-index: 103;
    }
#content {
    background-color: #e9ebee;
    border-radius:    10px;
    }
#middle {
    /*! background-color: white; */
    border-bottom: 2px solid #ababab;
    border-radius: 10px;
    min-width:     250px;
    position:      relative;
    }
footer {
    background-color: #111;
    border-top:       1px solid var(--main-theme-color);
    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:          145;
    }
footer.relative {
    margin-top: -8px;
    position:   relative;
    }
.footerin {
    align-items:     center;
    display:         flex;
    flex-flow:       row;
    justify-content: space-between;
    margin:          0 auto;
    max-width:       1400px;
    padding:         0 10px;
    position:        relative;
    }
body.fullscreensite .footerin {
    max-width: 95%;
    }
.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: var(--main-theme-color) !important;
    }
#cop {
    font-size:  12px;
    text-align: right;
    }
#cop a {
    color: white;
    }
#cop a:hover {
    color: darkorange;
    }
#explode {
    /*! background-color: #e9ebee; */
    /*! border-radius:    0 0 0 8px; */
    color:   #222;
    margin:  0 5px 5px 5px;
    padding: 10px 5px;
    }
#explode.forum {
    border-radius: 0 0 8px 8px;
    margin:        0 5px;
    }
#explode.ls {
    background: none;
    }
.exin {
    background-color: #fff;
    border-bottom:    2px solid #ababab;
    position:         relative;
    }
.exin .exin_h2 {
    background:    linear-gradient(to top, #222, #2c2b2b);
    border-bottom: 3px solid var(--main-theme-color);
    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.flexin {
    display:     flex;
    flex-flow:   row wrap;
    align-items: center;
    }
.exin .exin_h2.flexin .flexinspace {
    flex: 1;
    }
.exin .exin_h2 .flexul {
    margin:     0;
    padding:    0;
    list-style: none;
    display:    flex;
    flex-flow:  row wrap;
    }
.exin .exin_h2 .flexul > *:nth-child(2) {
    flex: 1;
    }
.exin .exin_h2 a {
    color: white;
    }
.exin .exin_in {
    padding: 10px;
    }
.exin_in.hangman {
    overflow: hidden;
    margin:   0 10px 0 0;
    }
.exin .exin_in.hangman > h2 {
    margin-top: 0;
    }
.exin .exin_in.hangman .outchars {
    font-size:      18px;
    letter-spacing: 0.04em;
    }
.exin .exin_in.hangman > a {
    margin-top: 30px;
    }
.frh2 {
    border-bottom:  1px solid #333;
    font-size:      16px;
    margin:         10px;
    padding-bottom: 5px;
    }
a.menu {
    background-color: #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-color: darkorange;
    }
.nav_head {
    background:    linear-gradient(to top, #222, #2c2b2b);
    border-bottom: 3px solid var(--main-theme-color);
    border-radius: 4px 4px 0 0;
    color:         white;
    font-size:     13px;
    padding:       10px;
    position:      relative;
    text-shadow:   0 1px 1px black !important;
    }
.nav_head i {
    font-size: 17px;
    position:  absolute;
    right:     10px;
    }
.nav_cont {
    background-color: #ffffff;
    padding:          10px;
    position:         relative;
    text-align:       center;
    }
.nav_cont .lacfilter {
    color:       white;
    cursor:      pointer;
    position:    absolute;
    right:       15px;
    text-shadow: 0 1px 1px black;
    top:         -26px;
    }
.nav_cont .lacbox {
    display: none;
    }
.nav_cont .lacbox.sel {
    display: flex;
    }
.nav_cont img {
    max-width: 270px;
    }
.middleupbox {
    padding:       0 5px 10px 5px;
    margin:        0 0 20px 0;
    list-style:    none;
    display:       flex;
    background:    linear-gradient(to top, #222, #2c2b2b);
    color:         white;
    border-radius: 4px;
    align-items:   flex-end;
    flex-flow:     row wrap;
    user-select:   none;
    }
.middleupbox > li {
    flex:      1;
    margin:    0 5px;
    font-size: 13px !important;
    min-width: 200px;
    }
.middleupbox > li > h2 {
    width:           100%;
    text-align:      center;
    font-size:       13px;
    margin:          0;
    padding:         6px 1px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    }
.middleupbox > li > h2 > img {
    width:       20px;
    height:      20px;
    margin-left: 5px;
    }
.middleupbox > li .exin_in {
    position:         relative;
    background-color: white;
    padding:          10px;
    color:            #000;
    height:           150px;
    border-radius:    4px;
    font-size:        13px;
    box-shadow:       inset 0 0 15px rgba(0, 0, 0, 0.6);
    }
.middleupbox > li .exin_in.infoexin > ul {
    padding:    0;
    list-style: none;
    }
.middleupbox > li .exin_in.infoexin > ul > li a:first-child {
    margin-top: 0;
    }
.middleupbox > li .exin_in.infoexin > ul > li a {
    color:         white;
    display:       block;
    width:         90%;
    box-shadow:    1px 3px 5px rgba(0, 0, 0, 0.4);
    padding:       5px;
    background:    linear-gradient(to top, #222, #333);
    margin:        13px auto;
    border-radius: 10px;
    text-align:    center;
    transition:    all 0.3s linear;
    border-top:    3px solid var(--main-theme-color);
    }
.middleupbox > li .exin_in.infoexin > ul > li a:hover {
    background: linear-gradient(to top, #333, #222);
    box-shadow: inset 1px 3px 5px rgba(0, 0, 0, 0.6);
    }
.middleupbox > li .exin_in h4 {
    margin:    0;
    font-size: 14px;
    }
.middleupbox > li .exin_in .inner_exin {
    width:     100%;
    position:  absolute;
    top:       50%;
    left:      50%;
    transform: translate(-50%, -50%);
    }
.middleupbox > li .exin_in h4 > span {
    display:     block;
    font-weight: normal;
    margin-top:  5px;
    }
.middleupbox > li .exin_in .outchars {
    display:   block;
    max-width: 250px !important;
    overflow:  hidden;
    margin:    10px auto 20px auto;
    }
#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:       0 -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;
    }
/************************************************************************************
Hangman
*************************************************************************************/
.hangman-container {
    display:         flex;
    flex-flow:       row wrap;
    justify-content: center;
    list-style:      none;
    margin:          0;
    padding:         0;
    }
.hangman-container > * {
    background:    #efefef;
    border-radius: 4px;
    box-shadow:    0 0 1px rgb(0 0 0);
    cursor:        pointer;
    height:        100%;
    margin:        15px;
    min-width:     300px;
    text-shadow:   0 1px 1px white;
    user-select:   none;
    }
.hangman-container > *.hangmancolor.nowinner {
    background: #eccdcd;
    }
.hangman-container > *.hangmancolor.finish {
    background: #d7ead7
    }
.hangman-container > * h2 {
    background:    linear-gradient(to top, #222, #444);
    border-radius: 4px 4px 0 0;
    color:         white;
    font-size:     14px;
    font-weight:   normal;
    margin:        0;
    padding:       10px;
    text-align:    center;
    text-shadow:   0 1px 1px black;
    }
.hangman-container > * h2 span {
    float:        left;
    margin-right: 5px;
    }
.hangman-container > * h2 i {
    float: right;
    }
.hangman-container .hangman-content {
    padding:    10px;
    word-break: break-all;
    }
.hangman-container .hangman-content .hangman-word {
    letter-spacing: 1px;
    }
.hangman-container .hangman-content > ul {
    display:    flex;
    flex-flow:  column wrap;
    list-style: none;
    margin:     0;
    padding:    0;
    text-align: center;
    }
.hangman-container .hangman-content > ul > li {
    flex:   1 auto;
    margin: 5px 0;
    }
.hangman-container .hangman-content > ul > li:first-child {
    margin-top: 0;
    }
.hangman-container .hangman-content > ul > li:last-child {
    margin-bottom: 0;
    }
/************************************************************************************
Streams
*************************************************************************************/
.startstream h2 {
    background:  linear-gradient(to top, #000, #2c2b2b);
    color:       white;
    display:     flex;
    flex-flow:   row wrap;
    font-size:   14px;
    font-weight: normal;
    margin:      0;
    padding:     5px 10px 10px 10px;
    }
.startstream h2 > *:first-child {
    flex: 1;
    }
.startstream h2 > *:last-child {
    cursor: pointer;
    }
.startstream {
    border-radius: 6px;
    overflow:      hidden;
    }
.startstream iframe {
    border-radius: 0 0 6px 6px;
    }
#chatopen {
    background-color: #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-color: #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;
    }
.videoframe {
    display:   flex;
    flex-flow: row wrap;
    }
.videoframe > *:first-child {
    flex: 2;
    }
.videoframe > *:last-child {
    flex:   1;
    height: 489px !important;
    }
.videoframe.start > *:last-child {
    height: 393px !important;
    }
.streamoptions {
    align-items: center;
    display:     flex;
    flex-flow:   row wrap;
    list-style:  none;
    margin:      0 0 10px 0;
    padding:     0;
    width:       100%;
    }
.streamoptions > *:first-child {
    margin-left: 0;
    }
.streamoptions > * {
    margin: 0 2px;
    }
.streamoptions > *:nth-child(2) {
    flex: 1;
    }
.streamsort {
    align-items:   center;
    border-bottom: 1px solid #ddd;
    display:       flex;
    flex-flow:     row wrap;
    list-style:    none;
    margin:        0;
    padding:       0 0 5px 0;
    }
.streamsort > *:first-child {
    margin-left: 0;
    }
.streamsort > * {
    margin: 0 2px;
    }
.streamsort > *:nth-child(4) {
    flex: 1;
    }
.streamsort > *:last-child select {
    width: 200px;
    }
.streamcontainer {
    display:         flex;
    flex-flow:       row wrap;
    justify-content: center;
    list-style:      none;
    margin:          0;
    padding:         0;
    }
.streamcontainer > li {
    background-color: #242627;
    border-radius:    10px;
    box-sizing:       border-box;
    color:            white;
    height:           100%;
    margin:           10px;
    max-height:       395px;
    max-width:        430px;
    overflow:         hidden;
    padding:          10px;
    position:         relative;
    width:            100%;
    }
.streamcontainer > li h2 {
    color:      white;
    margin:     0 0 10px 0;
    text-align: center;
    }
.streamcontainer > li a {
    border-radius: 10px;
    display:       block;
    min-height:    300px;
    overflow:      hidden;
    position:      relative;
    }
.streamtitle,
.streamviewers,
.streamlikes,
.streamstatus {
    position: absolute;
    z-index:  101;
    }
.streamcontainer > li a .channelbild {
    backface-visibility: hidden;
    border-radius:       10px;
    height:              100%;
    position:            absolute;
    transition:          all 0.3s linear;
    width:               100%;
    }
.streamstatus {
    background-color: 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-color: rgba(0, 0, 0, 0.6);
    border-radius:    0 10px 10px 0;
    color:            white;
    left:             -1px;
    padding:          10px 15px;
    top:              50%;
    transform:        translate(-100%, -50%);
    transition:       all 0.3s linear;
    }
.streamviewers {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius:    10px;
    color:            white;
    padding:          5px 10px;
    right:            10px;
    top:              10px;
    transition:       all 0.3s linear;
    }
.streamtitle {
    background-color: rgba(0, 0, 0, 0.6);
    bottom:           0;
    box-sizing:       border-box;
    color:            white;
    left:             0;
    padding:          10px;
    text-align:       center;
    text-shadow:      0 1px 1px black;
    width:            100%;
    }
.streamcontainer > li ul {
    list-style: none;
    margin:     15px 0 0 0;
    padding:    0;
    text-align: center;
    }
.streamcontainer > li ul li {
    display:        inline-block;
    margin:         0 5px;
    vertical-align: middle;
    }
.streamcontainer > li ul li img {
    border-radius: 4px;
    }
.streamcontainer > li:hover .streamlikes {
    transform: translate(0, -50%);
    }
.streambild:hover > .channelbild {
    transform: scale(1.2);
    }
.noin {
    filter: grayscale(100%);
    }
#liveplayer {
    z-index: 145;
    }
/************************************************************************************
Triggerboxen
*************************************************************************************/
.trigger-ul {
    list-style: none;
    margin:     0;
    padding:    0;
    }
.trigger-ul > * {
    margin-bottom: -5px;
    padding:       10px;
    text-align:    left;
    }
.trigger-ul > *.triggerflex {
    align-items: center;
    display:     flex;
    }
.trigger-ul > *.triggerflex > a {
    margin-right: 5px;
    }
.trigger-ul.center > * {
    text-align: center;
    }
/************************************************************************************
LOGIN
*************************************************************************************/
#loginin {
    list-style: none;
    margin:     0;
    padding:    0;
    }
#loginin li {
    display: inline;
    margin:  0 5px 0 5px;
    }
/************************************************************************************
PROFIL
*************************************************************************************/
.blocked_users {
    list-style: none;
    margin:     0;
    padding:    0;
    }
.blocked_users > li {
    margin: 10px 0;
    }
.profilhead {
    background-color: #333;
    color:            #fff;
    position:         relative;
    text-shadow:      0 1px 1px black;
    }
.profil li {
    background-color: #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 var(--main-theme-color);
    }
.profilinhalt {
    display: none;
    }
.profil li.select {
    border-top: 3px solid var(--main-theme-color);
    }
.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-color: var(--main-theme-color);
    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 {
    align-items: center;
    display:     flex;
    flex-flow:   row wrap;
    list-style:  none;
    margin:      0;
    padding:     0;
    }
.sortbilder > * {
    margin: 0 5px;
    }
.sortbilder li img {
    max-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-color: #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:       148;
    }
.floatingbox.select {
    opacity: 1;
    top:     12%;
    }
.floatingbox.submask {
    z-index: 150;
    }
.floatingbox.nocenter {
    text-align: left;
    }
.floatingbox > h2 {
    background:  #222;
    border-top:  1px solid #333;
    box-shadow:  0 5px 10px -5px rgba(0, 0, 0, 0.56);
    color:       white;
    font-size:   14px;
    margin:      0;
    padding:     15px 10px;
    position:    relative;
    text-shadow: 0 1px 1px black;
    user-select: none;
    z-index:     10;
    }
.floatingbox > h2 > a {
    top: 15px !important;
    }
.floatin {
    border-radius: 0 0 6px 6px;
    box-shadow:    inset 0 -5px 10px -5px rgba(0, 0, 0, 0.56);
    max-height:    500px;
    overflow:      hidden;
    padding:       10px;
    font-size:     13px;
    }
.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-color: var(--main-theme-color);
    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;
    }
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    color: #222 !important;
    }
#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
*************************************************************************************/
.newsoutput {
    display:         flex;
    flex-flow:       row wrap;
    list-style:      none;
    padding:         0;
    margin:          0;
    justify-content: center;
    }
.newscontainer {
    width:            650px;
    flex:             auto;
    background-color: #fff;
    border-bottom:    2px solid #ababab;
    border-radius:    4px 4px 0 0;
    margin:           10px;
    position:         relative;
    }
.newscontainer h2 {
    align-items:     center;
    background:      linear-gradient(to top, #222, #2c2b2b);
    border-bottom:   3px solid var(--main-theme-color);
    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;
    align-items: center;
    margin-top:  5px;
    padding:     10px 0;
    position:    relative;
    width:       100%;
    }
.newscontainer .nfooter > * {
    margin:  0;
    padding: 0;
    }
.newscontainer .nfooter > *:nth-child(2) {
    flex: 1;
    }
.newscontainer .newstext {
    display: block;
    /* font-size : 13px; */
    /* line-height : 19px; */
    padding: 10px 10px 0 10px;
    }
.newscontainer .newstext .nbild {
    display:    block;
    float:      right;
    margin:     0 0 10px 10px;
    max-width:  400px !important;
    position:   relative;
    text-align: right;
    }
.newscontainer .newstext .nbild img {
    width:         300px;
    height:        200px;
    object-fit:    cover;
    border-radius: 4px;
    padding:       2px;
    box-shadow:    0 0 5px #999;
    }
.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 .fc-button-primary {
    background-color: #333 !important;
    border:           0 !important;
    }
.fc .fc-button:hover {
    box-shadow:       none !important;
    background-color: var(--main-theme-color) !important;
    }
.fc .fc-button:focus {
    box-shadow: none !important;
    }
.fc-h-event { /* allowed to be top-level */
    padding: 4px;
    }
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--main-theme-color) !important;
    }
.fc th {
    text-align:       center;
    background-color: #333;
    padding:          2px !important;
    color:            white;
    }
.fc-theme-standard .fc-list-day-cushion {
    background-color: #333 !important;
    }
.fc .fc-daygrid-day.fc-day-today {
    background-color: #e9ebee !important;
    }
.fc .fc-timegrid-col.fc-day-today {
    background-color: #ddd !important;
    }
.fc-timegrid-event-harness-inset .fc-timegrid-event,
.fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link {
    box-shadow: none !important;
    }
#ui-datepicker-div {
    z-index: 3000 !important;
    }
.fc-theme-standard th {
    border: 0 !important;
    }
/*****************************************************
Seitenanzeige
*****************************************************/
#radioadmin {
    color:       #d7d7d7;
    line-height: normal;
    }
#radioadmin .xswitch {
    margin-bottom: 6px;
    }
#headradiowunsch {
    background:    rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    display:       flex;
    flex-flow:     column wrap;
    padding:       10px;
    position:      absolute;
    right:         20px;
    top:           -158px;
    width:         300px;
    z-index:       110;
    }
#headradiowunsch input,
#headradiowunsch textarea {
    border:        none;
    margin-bottom: 3px;
    resize:        none;
    }
#headradiowunsch textarea {
    height: 38px;
    }
#headradiowunsch input[type=submit] {
    border-radius: 4px;
    margin-bottom: 0;
    }
#disableheadradiowunsch {
    background:    rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    color:         #d7d7d7;
    cursor:        pointer;
    left:          -40px;
    padding:       10px;
    position:      absolute;
    transition:    left 0.3s linear;
    }
#disableheadradiowunsch.disable {
    background: red;
    }
/*****************************************************
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;
    position:    relative;
    user-select: none;
    z-index:     101;
    }
.dblinks > li a {
    background-color: #ddd;
    font-weight:      normal;
    padding:          5px 10px;
    text-decoration:  none;
    }
.dblinks > li a:hover {
    background-color: #333;
    color:            white;
    }
.dblinks > li:first-child a {
    background-color: #333;
    color:            white;
    cursor:           pointer;
    padding-left:     21px;
    position:         relative;
    }
.dblinks > li.dbselect a {
    background-color: #333;
    color:            white;
    }
.dblinks > li.dbpfeil a span {
    display:        inline-block;
    margin-top:     -5px;
    vertical-align: middle;
    }
.dblinks > li:first-child ul {
    background-color: #ddd;
    border:           1px solid #ccc;
    bottom:           -7px;
    font-size:        12px;
    left:             0;
    list-style:       none;
    margin:           0;
    opacity:          0;
    padding:          0;
    position:         absolute;
    transition:       all 0.1s linear;
    visibility:       hidden;
    width:            200px;
    z-index:          -1;
    }
.dblinks > li:first-child ul.show {
    bottom:     23px;
    opacity:    1;
    visibility: visible;
    }
.dblinks > li:first-child ul li {
    padding: 0 0 0 10px;
    }
.dblinks > li:first-child ul li input {
    padding: 2px 0;
    }
.xrang {
    font-size:  14px;
    margin-top: 2px;
    }
#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 var(--main-theme-color);
    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: var(--main-theme-color) !important;
    border:     0 !important;
    }
.os-theme-thin-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    background: var(--main-theme-color) !important;
    }
.os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
.os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before {
    background: var(--main-theme-color) !important;
    }
.os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    background: var(--main-theme-color) !important;
    }
.os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before,
.os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before {
    background: var(--main-theme-color) !important;
    }
.os-theme-block-dark.os-host-scrolling > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before {
    background: var(--main-theme-color) !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:         10px 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;
    }
.resptable {
    overflow: auto;
    }
.commaster {
    background-color: white;
    border-bottom:    2px solid #ababab;
    width:            100%;
    }
.commaster.xarcadestats {
    table-layout: fixed;
    }
.commaster.xarcadestats td:first-child h2 {
    border-bottom:  1px solid #ddd;
    font-size:      14px;
    margin:         0 0 10px 0;
    padding-bottom: 5px;
    text-align:     center;
    }
.commaster.xarcadestats td:first-child ul {
    margin:     20px 0 0 10px;
    text-align: left;
    }
.commaster.xarcadestats td:first-child ul > * {
    align-items: center;
    display:     flex;
    }
.commaster.xarcadestats td:first-child ul > * > *:first-child {
    margin-right: 15px;
    }
.commaster.xarcadestats td:first-child ul > * > *:last-child {
    border:        1px solid #cdcdcd;
    border-radius: 4px;
    margin:        -15px 0 0 15px;
    padding:       0 10px;
    position:      relative;
    }
.commaster.xarcadestats td:first-child ul > * > *:last-child:before {
    border-bottom: 3px solid transparent;
    border-left:   8px solid transparent;
    border-right:  10px solid #cdcdcd;
    border-top:    8px solid transparent;
    bottom:        6px;
    content:       '';
    height:        0;
    left:          -19px;
    position:      absolute;
    width:         0;
    }
.commaster.xarcadestats td:first-child ul > * .xpavatar {
    border-radius: 100%;
    }
.commaster.xarcadestats td ul {
    line-height: 25px;
    list-style:  none;
    margin:      0;
    padding:     0;
    text-align:  center;
    }
.commaster.xarcadestats td:nth-child(2) a {
    display: inline-block;
    margin:  10px 0;
    }
.commaster.xarcadestats td:nth-child(2) ul {
    display:         flex;
    flex-flow:       row wrap;
    justify-content: center;
    }
.commaster.xarcadestats td:nth-child(2) h2 {
    border-bottom:  1px solid #ddd;
    margin-bottom:  5px;
    padding-bottom: 5px;
    }
.commaster.xarcadestats td:nth-child(2) ul > * {
    margin: 10px;
    }
.commaster.xarcadestats td:nth-child(2) ul > * input[type=submit] {
    padding: 8px !important;
    }
.commaster tr {
    backface-visibility: hidden;
    }
.commaster th {
    background:       linear-gradient(to top, #222, #2c2b2b);
    background-color: #222;
    border-bottom:    3px solid var(--main-theme-color);
    color:            #fff;
    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 {
    border-bottom:  1px solid #ddd;
    border-left:    1px solid #e9ebee;
    padding:        10px;
    text-shadow:    0 1px 1px white;
    transition:     background 0.3s linear;
    vertical-align: middle;
    }
.commaster td > * {
    text-shadow: none;
    }
.commaster tbody tr:last-child td {
    border-bottom: 0;
    }
.commaster tbody tr:nth-child(even) {
    background: #f9f9f9;
    }
.commaster.server td {
    padding: 10px 10px;
    }
.commaster.arcadeout td {
    text-shadow: 0 1px 1px #fff;
    }
.commaster:not(.nohover) tr:hover td {
    background: #f0f0f0
    }
.nohover {
    background:  #fafafa !important;
    padding:     0 !important;
    text-shadow: 0 0 0 !important;
    }
.nohover .dblinks {
    margin-bottom: 11px;
    }
.xcommaster {
    border-bottom: 2px solid #ababab;
    list-style:    none;
    margin:        0;
    padding:       0;
    }
.xcommaster.challenges .row {
    align-items: stretch;
    }
.xcommaster .row {
    align-items: stretch;
    background:  white;
    display:     flex;
    flex-flow:   row wrap;
    transition:  background 0.3s linear;
    }
.xcommaster .row > * {
    flex:       1;
    text-align: center;
    }
.xcommaster .row.head {
    background:    linear-gradient(to top, #222, #2c2b2b);
    border-bottom: 3px solid var(--main-theme-color);
    border-radius: 4px 4px 0 0;
    color:         white;
    font-size:     13px;
    font-weight:   normal;
    position:      relative;
    text-align:    left;
    text-shadow:   0 1px 1px black;
    }
.xcommaster .row.head .cell {
    background: none;
    border:     0;
    }
.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 .cell {
    border-left:  1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    min-width:    200px;
    padding:      9px;
    }
.xcommaster .row .cell:first-child,
.xcommaster .row .cell:last-child {
    align-self:   center;
    border-left:  none;
    border-right: none;
    }
/*.xcommaster .row:not(.head):hover {
    background : #f2f2f2;
    }
    */
.xcommaster.overview .row:not(.head):hover {
    background: white;
    }
.xcommaster.overview .row > *:nth-child(1) {
    align-self: flex-start;
    flex:       1;
    }
.xcommaster.overview .row > *:nth-child(2) {
    flex: 3;
    }
.xcommaster.overview .row > *:nth-child(3) {
    align-self: flex-start;
    flex:       1;
    }
.xcommaster.overview .row .cell .xpavatar {
    background:    #e9ebee;
    border-radius: 100%;
    padding:       4px;
    }
#logactions {
    display:     flex;
    align-items: center;
    list-style:  none;
    margin:      0 0 10px 0;
    padding:     0;
    flex-flow:   row wrap;
    position:    relative;
    }
#logactions li {
    margin-right: 2px;
    }
#logactions li.transaction_first {
    flex: 1;
    }
#logactions li button,
#logactions li input {
    padding: 4px;
    }
#logactions li.seloptions {
    display: none;
    }
.searchtr {
    padding:    0;
    margin:     0;
    list-style: none;
    }
.searchtr li {
    position: relative;
    flex:     1
    }
.searchtr li input {
    width:     100%;
    padding:   6px !important;
    max-width: 250px;
    }
.searchtr li > i {
    display:       inline-flex;
    margin-left:   -26px;
    cursor:        pointer;
    padding:       5px;
    border-radius: 2px;
    }
.searchtr li > i:hover {
    background-color: #ddd;
    }
.shopnowtitle {
    display:         block;
    margin-bottom:   5px;
    text-decoration: underline;
    }
#nsearchload {
    display:  none;
    position: absolute;
    right:    10px;
    top:      9px;
    }
.spoilerhide {
    cursor:      pointer;
    user-select: none;
    display:     table;
    }
.spoilerhide > p {
    padding:          10px;
    border:           1px solid #ccc;
    border-radius:    4px;
    background-color: #e9e9e9;
    position:         relative;
    display:          table;
    user-select:      text;
    cursor:           default;
    margin:           10px 5px 0 0;
    }
@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.2s linear;
    visibility: hidden;
    width:      100%;
    z-index:    145;
    }
#shadowmask.select {
    opacity:    .75;
    visibility: visible;
    }
#shadowmask.submask {
    z-index: 149;
    }
#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:       var(--main-theme-color);
    font-weight: bold;
    }
#ustats li a {
    color:       white;
    margin-left: 10px;
    transition:  all 0.3s linear;
    }
#ustats li > a:hover {
    color: var(--main-theme-color);
    }
.omem {
    list-style: none;
    margin:     0;
    padding:    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;
    }
.omem li:last-child {
    border-top:  1px solid #333;
    margin-top:  10px;
    padding-top: 5px;
    }
#rangbaus {
    list-style:      none;
    margin:          0;
    padding:         0;
    display:         flex;
    flex-flow:       row wrap;
    justify-content: center;
    }
#rangbaus li {
    border:        1px solid #666;
    border-radius: 2px;
    margin:        10px;
    padding:       2px;
    width:         110px;
    display:       flex;
    flex-flow:     column;
    height:        120px;
    }
#rangbaus li > *:nth-child(2) {
    display:         inline-flex;
    flex:            1;
    justify-content: center;
    }
#rangbaus li > *:nth-child(2) img {
    align-self: center;
    }
#rangbaus li span:nth-last-child(1) {
    border-top: 1px solid #ddd;
    padding:    5px;
    }
/*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;
    }
.br-theme-css-stars .br-widget a.br-active:after,
.br-theme-css-stars .br-widget a.br-selected:after {
    color: var(--main-theme-color) !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;
    }
@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;
    color:       var(--main-theme-color);
    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:       var(--main-theme-color);
    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 > li:first-child {
    padding-top: 5px;
    }
.boxline > li {
    border-bottom: 1px solid #ddd;
    padding:       10px;
    position:      relative;
    }
.boxline > li i {
    align-self: center;
    }
.boxline > li > div:first-child {
    display:     flex;
    font-weight: bold;
    }
.boxline > li > div:first-child span {
    flex:          1 auto;
    text-overflow: ellipsis;
    overflow:      hidden;
    display:       block;
    margin-right:  20px;
    white-space:   nowrap;
    }
.boxline > li > div:first-child a {
    position: relative;
    }
.boxline > li > div:first-child img {
    margin-right: 15px;
    }
.boxline > li > div:last-child {
    margin:    5px 0 0 31px;
    font-size: 11px;
    }
.boxline > li:last-child {
    border-bottom:  0;
    padding-bottom: 0;
    }
.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 > li > div:first-child a:before {
    content:    '[';
    left:       0;
    opacity:    0;
    position:   absolute;
    top:        0;
    transform:  translateX(0);
    transition: all 0.3s linear;
    }
.boxline > li > div:first-child a:after {
    content:    ']';
    opacity:    0;
    position:   absolute;
    right:      0;
    top:        0;
    transform:  translateX(0);
    transition: all 0.3s linear;
    }
@keyframes fadeIn {
    from {
        opacity: 0;
        }
    to {
        opacity: 1;
        }
    }
.tippy-box {
    background:    linear-gradient(to bottom, #aaa, #eee) !important;
    border:        2px solid var(--main-theme-color);
    border-radius: 4px;
    box-shadow:    0 0 12px rgba(0, 0, 0, 0.6);
    color:         #000;
    font-size:     13px;
    text-shadow:   0 1px 1px rgba(255, 255, 255, 0.5) !important;
    word-wrap:     break-word;
    }
.tippy-box[data-placement^=top] > .tippy-arrow:before {
    border-top-color: var(--main-theme-color);
    bottom:           -10px;
    }
.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
    border-bottom-color: var(--main-theme-color);
    top:                 -10px;
    }
.tippy-box[data-placement^=left] > .tippy-arrow:before {
    border-left-color: var(--main-theme-color)
    }
.tippy-box[data-placement^=right] > .tippy-arrow:before {
    border-right-color: var(--main-theme-color)
    }
.tippy-box > .tippy-backdrop {
    background-color: var(--main-theme-color)
    }
.tippy-box[data-theme~=light] > .tippy-svg-arrow {
    fill: var(--main-theme-color)
    }
.tippy-box[data-theme~='dark'] {
    background:  rgba(10, 10, 10, .9) !important;
    border:      none;
    box-shadow:  0 0 12px rgba(0, 0, 0, 0.6);
    color:       white;
    font-size:   12px;
    text-shadow: none !important;
    }
.tippy-box[data-theme~='dark'][data-placement^=bottom] > .tippy-arrow:before {
    border-bottom-color: rgba(10, 10, 10, .9);
    top:                 -8px;
    }
.tippy-box[data-theme~='dark'] a {
    color: white;
    }
.tooltipster-sidetip.tooltipster-light .tooltipster-box {
    border: 2px solid var(--main-theme-color) !important;
    }
.tooltipster-sidetip.tooltipster-light.tooltipster-bottom .tooltipster-arrow-background {
    border-bottom-color: var(--main-theme-color) !important;
    }
.tooltipster-sidetip.tooltipster-light.tooltipster-left .tooltipster-arrow-background {
    border-left-color: var(--main-theme-color) !important;
    }
.tooltipster-sidetip.tooltipster-light.tooltipster-right .tooltipster-arrow-background {
    border-right-color: var(--main-theme-color) !important;
    }
.tooltipster-sidetip.tooltipster-light.tooltipster-top .tooltipster-arrow-background {
    border-top-color: var(--main-theme-color) !important;
    }
.tooltipster-sidetip.tooltipster-light.tooltipster-bottom .tooltipster-arrow-border {
    border-bottom-color: var(--main-theme-color) !important;
    }
.tooltipster-sidetip.tooltipster-light.tooltipster-left .tooltipster-arrow-border {
    border-left-color: var(--main-theme-color) !important;
    }
.tooltipster-sidetip.tooltipster-light.tooltipster-right .tooltipster-arrow-border {
    border-right-color: var(--main-theme-color) !important;
    }
.tooltipster-sidetip.tooltipster-light.tooltipster-top .tooltipster-arrow-border {
    border-top-color: var(--main-theme-color) !important;
    }
#selectlogs {
    font-size:   12px;
    font-weight: normal;
    position:    absolute;
    right:       0;
    top:         -8px;
    }
#selectlogs form {
    display:     inline-block;
    margin-left: 5px;
    }
#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%;
    }
.xadmintitle {
    align-items:    center;
    border-bottom:  1px solid #ddd;
    color:          #222;
    display:        flex;
    flex-flow:      row wrap;
    font-size:      16px;
    margin:         0 0 10px 0;
    padding-bottom: 10px;
    position:       relative;
    }
.xadmintitle > a {
    font-size:   12px;
    font-weight: normal;
    }
.xadmintitle div {
    flex: 1;
    }
.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;
    justify-content: center;
    list-style:      none;
    margin:          0;
    padding:         0;
    }
.xarcngames li {
    backface-visibility: hidden;
    display:             inline-block;
    height:              50px;
    margin:              5px 10px;
    position:            relative;
    vertical-align:      top;
    width:               50px;
    }
.xarcnlist {
    list-style: none;
    margin:     0;
    padding:    0;
    }
.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;
    text-align: left;
    }
.xarcnlist li img {
    border-radius: 100% !important;
    margin-right:  10px;
    transition:    all 0.3s linear;
    }
.xarcnlist li span {
    display:     block;
    float:       right;
    font-weight: bold;
    padding:     5px 0;
    text-align:  center;
    }
.xarcnlist li:last-child {
    border-bottom:  0;
    margin:         0;
    padding-bottom: 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;
    }
.resetcounter_info {
    padding-top: 10px;
    border-top:  1px solid #ddd;
    margin-top:  40px !important;
    }
.hscounter {
    display:     flex !important;
    align-items: center !important;
    }
.hscounter > * {
    font-weight: bold;
    font-size:   14px;
    margin:      0 10px;
    text-align:  center;
    }
.hscounter > * small {
    display:     block;
    font-weight: normal;
    }
.nexthighscoreplay {
    font-weight: normal;
    font-size:   14px;
    margin-top:  10px;
    padding-top: 10px;
    display:     flex;
    align-items: center;
    }
.mainbox {
    margin-bottom: 20px;
    }
.mainbox > ul {
    padding:     0;
    margin:      0;
    list-style:  none;
    display:     flex;
    flex-flow:   row wrap;
    user-select: none;
    }
.mainbox > ul > li {
    flex:             1;
    margin-right:     5px;
    text-align:       center;
    background-color: white;
    border-bottom:    2px solid #ababab;
    min-width:        250px;
    border-radius:    4px 4px 0 0;
    }
.mainbox > ul > li:last-child {
    margin-right: 0;
    }
.mainbox > ul > li h3 {
    border-radius: 4px 4px 0 0;
    }
.mainbox > ul > li > h3 {
    text-shadow:     0 1px 1px black;
    margin:          0;
    background:      linear-gradient(to top, #222, #2c2b2b);
    border-bottom:   3px solid var(--main-theme-color);
    padding:         10px;
    color:           white;
    font-size:       13px;
    font-weight:     normal;
    display:         flex;
    align-items:     center;
    justify-content: center;
    height:          20px;
    position:        relative;
    }
.mainbox > ul > li > h3 > button {
    position:         absolute;
    right:            10px;
    background-color: red;
    font-weight:      bold;
    color:            #000 !important;
    animation:        newmods 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
@keyframes newmods {
    0% {
        background-color: red;
        }
    50% {
        background-color: #444;
        }
    100% {
        background-color: red;
        }
    }
.mainbox > ul > li > h3 > img {
    width:       20px;
    height:      20px;
    margin-left: 5px;
    }
.mainbox > ul > li > div {
    padding:  10px;
    height:   150px;
    position: relative;
    }
.mainbox > ul > li > div > .innermainbox {
    width:     100%;
    position:  absolute;
    top:       45%;
    left:      50%;
    transform: translate(-50%, -50%);
    }
.mainbox > ul > li > div > .innermainbox .outchars {
    display:   block;
    max-width: 250px !important;
    overflow:  hidden;
    margin:    10px auto 25px auto;
    }
.mainbox > ul > li:nth-child(2) > div > ul {
    padding:    0;
    margin:     0;
    list-style: none;
    }
.mainbox > ul > li:nth-child(2) > div > ul > li > a {
    display:       block;
    padding:       5px;
    background:    linear-gradient(to top, #222, #2c2b2b);
    border-top:    3px solid var(--main-theme-color);
    color:         white;
    margin-bottom: 13px;
    border-radius: 4px;
    box-shadow:    1px 3px 5px rgba(0, 0, 0, 0.4);
    text-shadow:   0 1px 1px black;
    }
.mainbox > ul > li:nth-child(2) > div > ul > li > a:hover {
    background: linear-gradient(to top, #2c2b2b, #222);
    box-shadow: inset 1px 3px 5px rgba(0, 0, 0, 0.6);
    }
.startboxes h3 {
    background:    linear-gradient(to top, #222, #2c2b2b);
    border-bottom: 3px solid var(--main-theme-color);
    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: var(--main-theme-color);
    }
.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 5px;
    }
#showchatbox {
    border-bottom: 2px solid #ababab;
    display:       flex;
    flex-flow:     column;
    height:        300px;
    padding:       10px 10px 5px 10px;
    position:      relative;
    }
.chatemoji {
    font-size: 20px;
    }
#shout {
    flex:     1;
    overflow: hidden;
    }
#shoutboxtext {
    list-style: none;
    margin:     0;
    padding:    0;
    }
.ui-icon-gripsmall-diagonal-se {
    display: none !important;
    }
#shoutform {
    position:    relative;
    background:  white;
    border-top:  1px solid #ddd;
    box-shadow:  0 -10px 10px rgba(0, 0, 0, 0.04);
    display:     flex;
    flex-flow:   row wrap;
    align-items: center;
    padding-top: 5px;
    }
#shoutform .cke_chrome {
    border:     1px solid #b6b6b6;
    box-shadow: 0 0 0;
    display:    block;
    padding:    0;
    top:        5px;
    }
#shoutform .cke_bottom {
    background: none;
    border:     none;
    display:    none;
    left:       0;
    padding:    0;
    position:   absolute;
    bottom:     -8px;
    }
#shoutform .cke_toolgroup {
    float:  left;
    margin: 0 6px 5px 0;
    }
#shoutform > ul {
    flex:        1;
    align-items: center;
    display:     flex;
    flex-flow:   row wrap;
    list-style:  none;
    margin:      0 0 0 5px;
    padding:     0;
    }
#shoutform > ul li {
    margin: 0 2px;
    }
#shoutform #showcode.select {
    background: var(--main-theme-color);
    color:      white;
    }
#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:     var(--main-theme-color);
    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;
    list-style: none;
    margin:     0;
    overflow:   hidden;
    padding:    0;
    }
.ogamesul.ohidden {
    height: 120px;
    }
.ogamesul.orandom {
    height: 360px;
    }
.emoausgabe {
    padding: 10px 0;
    }
.ogamesul li {
    flex:   1;
    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 > * {
    flex: 1;
    }
.xnoticontent > *:first-child {
    max-width:    280px;
    margin-right: 30px;
    padding:      10px 0;
    }
.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 > * {
    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:           200px;
    }
.xshopartikel.shopin > * input {
    width: 100%;
    }
.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-Hover
*****************************************************/
.xhover {
    text-align: center;
    width:      350px;
    }
.xhover_details {
    margin-top: 5px;
    }
.xhover_details small {
    display:    block;
    margin-top: 10px;
    }
.xhover .xpavatar {
    border:        3px solid var(--main-theme-color);
    border-radius: 100px;
    display:       inline-flex;
    margin:        -50px 0 0 0 !important;
    padding:       0 !important;
    position:      relative;
    z-index:       10000;
    background:    linear-gradient(to bottom, #aaa, #eee) !important;
    }
.xhover_stats {
    display:         flex;
    flex-flow:       row wrap;
    list-style:      none;
    margin:          20px 0;
    padding:         0;
    justify-content: center;
    }
.xhover_stats > * {
    flex:       1;
    text-align: center;
    }
.xhover_stats > * > i {
    font-size: 35px;
    }
.xhover_stats > * > span {
    display:    block;
    margin-top: 10px;
    font-size:  16px;
    }
.xhover_badges {
    display:    flex;
    flex-flow:  row wrap;
    list-style: none;
    margin:     0;
    padding:    0;
    text-align: left;
    }
.xhover_buttons {
    display:         flex;
    flex-flow:       row wrap;
    list-style:      none;
    margin:          10px 0;
    padding:         0;
    justify-content: center;
    }
.xhover_buttons > * {
    margin: 0 5px;
    }
.xhover a.button {
    text-shadow: 0 1px 1px black;
    }
/*****************************************************
X-Profil
*****************************************************/
.nextforumrang {
    display:        inline-block;
    vertical-align: middle;
    width:          150px;
    height:         15px;
    border:         1px solid #ccc;
    position:       relative;
    margin-top:     -1px;
    }
.nextforumrang_balken {
    min-width:        2px;
    position:         absolute;
    left:             0;
    margin:           2px 0 0 2px;
    height:           80%;
    background-color: var(--main-theme-color);
    }
#showonlinemembers {
    color:       #ddd;
    display:     inline-block;
    text-shadow: 0 1px 1px black;
    }
#showonlinemembers > span {
    color:       var(--main-theme-color);
    font-weight: bold;
    }
#onlineausgabe {
    list-style: none;
    margin:     0;
    min-width:  100px;
    padding:    0;
    }
#onlineausgabe > * {
    align-items: center;
    display:     flex;
    margin:      5px;
    }
#onlineausgabe > * a,
#onlineausgabe > * span:first-child {
    flex:         1;
    margin-right: 10px;
    }
#onlineausgabe > *:last-child {
    border-top:    1px solid #333;
    margin-bottom: 0;
    margin-top:    10px;
    padding-top:   5px;
    }
.xprofilcol {
    display:    flex;
    flex-flow:  row wrap;
    list-style: none;
    margin:     0;
    padding:    0;
    }
.xprofilcol > li:first-child {
    margin-right: 20px;
    }
.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;
    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:     1;
    position: relative;
    }
.xparound {
    margin-bottom: 20px;
    position:      relative;
    }
.xparound > div {
    align-items: flex-start;
    display:     flex;
    flex-flow:   row wrap;
    }
.xparound > div > :first-child {
    flex: 1 auto;
    }
.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;
    }
.fc-state-active,
.fc-state-down {
    background-color: var(--main-theme-color) !important;
    }
.rating input {
    cursor:  pointer;
    display: none;
    }
.rating label:hover,
.rating label:hover ~ label {
    color:  var(--main-theme-color);
    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:  var(--main-theme-color);
    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:      0 0 20px 0;
    padding:     0;
    }
.xpmainbuttons.ownxp > * {
    color:  #ddd;
    cursor: default;
    }
.xpmainbuttons > * {
    color:       grey;
    cursor:      pointer;
    margin:      10px 34px 0 0;
    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;
    display:     inline-block;
    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-color: var(--main-theme-color);
    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 {
    margin:     0 50px;
    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 > * .xpavatar {
    border:        2px solid white;
    border-radius: 100% !important;
    padding:       0 !important;
    }
.xpawards {
    overflow: hidden;
    width:    205px;
    }
.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.aw_member {
    background: #5ca3cd;
    }
.awa {
    border-radius: 100%;
    box-shadow:    1px 1px 1px #958989;
    color:         white;
    height:        60px;
    position:      relative;
    text-shadow:   0 1px 1px rgb(0 0 0 / 34%);
    width:         60px;
    }
.awa > div {
    border-radius: 100%;
    box-shadow:    inset 1px 1px 1px rgb(255 255 255 / 50%);
    box-sizing:    border-box;
    height:        56px;
    left:          50%;
    position:      absolute;
    top:           50%;
    transform:     translate(-50%, -50%);
    width:         56px;
    }
.awa > div > i {
    font-size:  25px;
    position:   absolute;
    text-align: center;
    top:        9px;
    width:      100%;
    }
.awa > div > span {
    border-radius: 100%;
    bottom:        4px;
    font-size:     10px;
    position:      absolute;
    text-align:    center;
    width:         100%;
    }
.xnewawards {
    align-items: center;
    display:     flex;
    flex-flow:   row wrap;
    list-style:  none;
    margin:      0;
    padding:     0;
    }
.xnewawards > * {
    margin: 4px;
    }
.xawards {
    align-items: flex-start;
    display:     flex;
    flex-flow:   row wrap;
    list-style:  none;
    margin:      0;
    padding:     0;
    }
.xawards > *:first-child {
    margin-right: 10px;
    }
.xawards > *:last-child {
    flex: 1;
    }
.xawards > *:last-child h2 {
    margin-top:      0;
    text-decoration: underline
    }
/*****************************************************
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;
    word-break:  break-all;
    }
.chentries > li > div > a > img.xpavatar {
    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 > *.showccoms {
    margin-left: auto
    }
.chentries > li > small {
    color:   grey !important;
    display: block;
    margin:  5px 0 0 5px;
    }
.outputkoms {
    display:     none;
    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;
    }
/*****************************************************
Likeemolist
*****************************************************/
.likeemolist {
    padding:     10px 0 3px 0;
    margin:      0;
    list-style:  none;
    display:     flex;
    align-items: center;
    }
.likeemolist > li {
    margin: 0 5px;
    }
.likeemolist > li > a {
    font-size:   30px;
    user-select: none;
    cursor:      pointer;
    }
.likeover {
    position:    relative;
    display:     inline-flex;
    align-items: center;
    font-size:   14px;
    cursor:      pointer;
    padding:     5px 10px !important;
    user-select: none;
    }
.likeover:hover {
    background: #ddd;
    }
.likeover.select {
    background: #ddd;
    }
.likeover i {
    margin-right: 5px;
    }
.likeemooutput {
    padding:   10px 0;
    font-size: 16px;
    display:   none;
    cursor:    pointer;
    }
.likeemooutput > small {
    margin-left:    -3px;
    display:        inline-block;
    vertical-align: middle;
    }
.emoouth4 {
    margin: 0 0 5px 0;
    }
.emodetailul,
.emodetailul > li ul {
    margin:     0;
    padding:    0;
    list-style: none;
    }
.emodetailul {
    position:   relative;
    display:    flex;
    flex-flow:  row wrap;
    min-height: 300px;
    }
.emodetailul > li {
    margin:      0 20px 0 0;
    font-size:   20px;
    cursor:      pointer;
    user-select: none;
    text-align:  left;
    }
.emodetailul > li > span {
    display:     inline-block;
    line-height: 30px;
    }
.emodetailul > li > span.show {
    border-bottom: 3px solid var(--main-theme-color);
    }
.emodetailul > li:last-child {
    margin-right: 0;
    }
.emodetailul > li small {
    font-size:   14px;
    margin-left: -5px;
    }
.emodetailul > li > ul {
    margin-top: 20px;
    opacity:    0;
    visibility: hidden;
    position:   absolute;
    left:       0;
    }
.emodetailul > li > ul.show {
    opacity:    1;
    visibility: visible;
    }
.emodetailul > li > ul > li {
    font-size:   13px;
    line-height: 20px;
    display:     flex;
    align-items: center;
    }
.emodetailul > li > ul > li > * {
    margin: 5px 5px 5px 0;
    }
.emodetailul > li > ul > li > small {
    font-size: 11px;
    }
/*****************************************************
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;
    justify-content: flex-start;
    margin-bottom:   20px;
    padding-bottom:  20px;
    text-align:      left;
    }
.xplastac > li > div div {
    display: inline-block;
    }
.xplastac > li > div div > span {
    display:        inline-block;
    vertical-align: middle;
    margin:         -9px 0 0 3px;
    }
.xplastac > li:last-child {
    border-bottom:  0 !important;
    padding-bottom: 0 !important;
    }
.xplastac > li > img {
    border-radius: 100%;
    margin:        0 10px 0 0;
    }
.xplastac > li > div {
    flex: 1;
    /*! margin-right: 20px; */
    }
.xplastac > li > div > span {
    display:       block;
    margin-bottom: 10px;
    }
.xplastac > li > span {
    color:        #999;
    margin-right: 10px;
    text-align:   right;
    }
.xplastacmore {
    background-color: white !important;
    border-top:       1px solid #ddd;
    padding:          10px 0 0 0;
    position:         relative;
    text-align:       center;
    }
.xpmore {
    padding: 5px 10px !important;
    }
.xpmore.load,
.xpmoretimeline.load {
    background: var(--main-theme-color) !important;
    }
.xplastacfilter {
    align-items:     center;
    border-bottom:   1px solid #ddd;
    display:         flex;
    flex-flow:       row wrap;
    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:       5px 0 10px 0;
    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;
    line-height: 18px;
    }
.xplastac.box > li > div div {
    display: inline-block;
    }
.xplastac.box > li > div div > span {
    display:        inline-block;
    vertical-align: middle;
    margin:         -9px 0 0 3px;
    }
.xplastac.box > li > div > span > i {
    font-size:  11px;
    font-style: normal;
    }
.lastacscroll {
    max-height:     430px;
    overflow:       hidden;
    padding-bottom: 10px;
    }
/*****************************************************
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;
    }
/*****************************************************
Minecraft Form
*****************************************************/
.minecraft_form {
    padding:    10px;
    text-align: center;
    }
.minecraft_form input[type=submit] {
    font-size: 15px;
    padding:   10px 15px !important;
    }
.minecraft_form input[type=text],
.minecraft_form select {
    font-size: 15px;
    max-width: 450px;
    padding:   10px;
    width:     100%;
    }
.minecraft_form label input[type=radio] {
    height: 20px;
    margin: 0 10px;
    width:  20px;
    }
.minecraft_form label {
    font-size: 15px;
    }
.minecraft_form textarea {
    font-size: 15px;
    max-width: 350px;
    padding:   10px;
    resize:    none;
    width:     100%;
    }
.minecraft_form ::-webkit-input-placeholder {
    font-size:  15px;
    text-align: center;
    }
.minecraft_form :-moz-placeholder {
    font-size:  15px;
    text-align: center;
    }
.minecraft_form ::-moz-placeholder {
    font-size:  15px;
    text-align: center;
    }
.minecraft_form :-ms-input-placeholder {
    font-size:  15px;
    text-align: center;
    }
/*****************************************************
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:     20px;
    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:       20px;
    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.small {
    height: 50px;
    width:  50px;
    }
.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-color: #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.small span {
    height:      38px;
    line-height: 38px;
    margin-left: -19px;
    margin-top:  -19px;
    width:       38px;
    }
.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-color: #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 var(--main-theme-color);
    }
.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-color: 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 10px;
    padding:       5px 0;
    position:      relative;
    text-align:    left;
    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;
    }
.cwlist > li > span + span {
    color:       #666;
    font-size:   11px;
    font-weight: normal;
    padding-top: 5px;
    }
.cwlist > li > i {
    bottom:   10px;
    cursor:   pointer;
    position: absolute;
    right:    0;
    }
/*****************************************************
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:       146;
    }
.chatslider#showemoji {
    max-width: 700px;
    width:     auto;
    }
.chatslider h2 {
    background:    linear-gradient(to top, #222, #2c2b2b);
    border-bottom: 3px solid var(--main-theme-color);
    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 {
    height: 260px !important;
    }
.emoji_switch {
    border-bottom: 1px solid #ccc;
    display:       flex;
    list-style:    none;
    margin:        0;
    padding:       0 0 5px 0 !important;
    user-select:   none;
    }
.emoji_switch > * {
    background: #ddd;
    cursor:     pointer !important;
    flex:       1;
    margin:     0 5px;
    padding:    5px !important;
    text-align: center;
    }
.emoji_switch > *.select {
    background: #333;
    color:      white;
    }
/*****************************************************
Roblox
*****************************************************/
.exin_in.robloxin {
    align-items:     flex-start;
    display:         flex;
    flex-flow:       row wrap;
    justify-content: center;
    }
.exin_in.robloxin > * {
    flex: 1;
    }
.exin_in.robloxin div:first-child > h2 {
    margin-top: 14px;
    }
.exin_in.robloxin div:first-child > h2 > small {
    display:        inline-block;
    font-size:      13px;
    font-weight:    normal;
    margin:         -3px 0 0 10px;
    vertical-align: middle;
    }
.exin_in.robloxin div > h2 {
    border-bottom:  1px solid #ddd;
    padding-bottom: 10px;
    }
.roblox_players {
    margin-right: 40px;
    }
.robloxplayers {
    display:    flex;
    flex-flow:  row wrap;
    list-style: none;
    margin:     0;
    padding:    0;
    }
.robloxplayers > * {
    margin:     10px 40px;
    text-align: center;
    }
.robloxplayers > * img {
    border-radius: 100% !important;
    border-color:  #ddd !important;
    overflow:      hidden;
    }
.robloxplayer_title {
    list-style: none;
    margin:     0;
    padding:    0;
    }
.robloxplayer_title > * {
    border-bottom: 1px solid #aaa;
    padding:       10px 0;
    }
.robloxplayer_title > *:first-child {
    padding-top: 0;
    }
.robloxplayer_title > *:last-child {
    border-bottom:  0;
    padding-bottom: 0;
    }
.roblox_info {
    line-height: 22px;
    max-width:   500px;
    }
.roblox_info > h2 {
    margin-bottom: 20px;
    }
.robloxserver {
    display:         flex;
    flex-flow:       row wrap;
    justify-content: center;
    list-style:      none;
    margin:          0;
    padding:         0;
    }
.robloxserver > * {
    background-color: white;
    border:           1px solid #ccc;
    border-radius:    4px;
    box-shadow:       0 0 10px #ccc;
    margin:           10px;
    max-width:        400px;
    padding:          10px;
    text-align:       center;
    }
.robloxserver > * img {
    border-radius: 4px;
    height:        150px;
    width:         150px;
    }
.robloxserver > * h2 {
    background:    linear-gradient(to top, #222, #2c2b2b);
    border-radius: 4px;
    color:         white;
    font-size:     14px;
    margin:        0 0 10px 0;
    padding:       5px 60px !important;
    position:      relative;
    word-wrap:     break-word;
    }
.robloxserver > * h2 ul {
    display:    flex;
    list-style: none;
    margin:     0;
    padding:    0;
    position:   absolute;
    right:      5px;
    top:        5px;
    }
.robloxserver > * h2 ul > * a {
    color:  white;
    margin: 0 5px;
    }
.robloxserver > * h2 small {
    display:     block !important;
    font-weight: normal;
    margin-top:  5px;
    }
.robloxserver > * div {
    margin-top: 5px;
    }
.robloxserver > * div span {
    display:     block;
    line-height: 22px;
    }
.robloxserver > * div span + span {
    margin-top: 10px;
    }
/*****************************************************
Events
*****************************************************/
.eventtip {
    max-width:  300px;
    text-align: center;
    word-wrap:  break-word;
    }
.eventtip > h2 {
    border-bottom: 1px solid #666;
    font-size:     12px;
    margin:        0 0 5px 0;
    }
.upcomevents {
    list-style: none;
    margin:     0;
    padding:    0;
    }
.upcomevents li:first-child h2 {
    margin-top: 0;
    }
.upcomevents li h2 {
    border-bottom: 1px solid #ddd;
    font-size:     14px;
    margin:        5px 0 5px 0;
    padding:       0 0 5px 0;
    position:      relative;
    }
.upcomevents li h2 i {
    color:     #666;
    cursor:    help;
    font-size: 18px;
    position:  absolute;
    right:     5px;
    top:       0px;
    }
.upcomevents li span {
    color:     #444;
    font-size: 11px;
    }
.upcomevents > li div {
    /*! border:        2px solid #e9ebee; */
    border-radius: 4px;
    color:         white;
    font-size:     12px;
    margin:        5px auto 10px auto;
    padding:       5px 0;
    text-shadow:   0 1px 1px black;
    width:         220px;
    }
.upcomevents > li div:last-child {
    margin-bottom: 0;
    }
.upcomevents > li div:hover {
    cursor: help
    }
/*****************************************************
Switchboxen
*****************************************************/
.forumswitch {
    border-bottom: 1px solid #ddd;
    display:       flex;
    flex-flow:     row wrap;
    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:          auto;
    margin:        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 > span {
    font-weight: bold;
    }
.forumswitch li:hover {
    background: var(--main-theme-color);
    }
.forumswitch li.select {
    background: var(--main-theme-color);
    }
.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
 ****************************/
.fileuploadbar {
    background-color: #dadce0;
    border-radius:    4px;
    height:           15px;
    overflow:         hidden;
    position:         relative;
    width:            250px;
    }
.fileuploadbar span {
    background-color: #5f6368;
    height:           100%;
    left:             0;
    min-width:        2px;
    position:         absolute;
    }
.uploadpictures {
    align-items: center;
    display:     flex;
    flex-flow:   row wrap;
    font-size:   13px;
    list-style:  none;
    margin:      10px 18px;
    padding:     0;
    }
.uploadpictures > li {
    background-color: #dddddd;
    cursor:           pointer;
    margin:           0 3px;
    padding:          10px 15px 10px 15px;
    user-select:      none;
    }
.uploadpictures > li:nth-child(4) {
    background: none;
    cursor:     default;
    flex:       1;
    padding:    0;
    }
.uploadpictures > li:nth-child(3) {
    background:  none;
    cursor:      default;
    line-height: 20px;
    text-align:  center;
    }
.uploadpictures > li:nth-child(4):active,
.uploadpictures > li:nth-child(4).select,
.uploadpictures > li:nth-child(3):active,
.uploadpictures > li:nth-child(3).select {
    background: none;
    color:      inherit;
    }
.uploadpictures li:active {
    background: #333;
    color:      #dddddd;
    }
.uploadpictures li.select {
    background: #333;
    color:      #dddddd;
    }
.uploadoutput {
    border:  1px solid #dddddd;
    margin:  20px;
    padding: 10px;
    }
.showuploadfiles_ul {
    display:         flex;
    flex-flow:       row wrap;
    justify-content: center;
    list-style:      none;
    margin:          0;
    padding:         0;
    }
.showuploadfiles_ul > * {
    background-color: #efefef;
    border-radius:    4px;
    margin:           10px;
    max-width:        430px;
    overflow:         hidden;
    padding:          10px;
    transition:       background 0.25s ease-in-out;
    width:            100%;
    }
.showuploadfiles_ul > * a {
    align-self: flex-start;
    display:    inline-block;
    }
.showuploadfiles_ul > *:hover {
    background: none !important;
    }
.showuploadfiles_ul > * h2 {
    background-color: #222;
    border-radius:    4px;
    color:            white;
    font-size:        13px;
    margin:           0 0 10px 0;
    padding:          10px;
    text-align:       center;
    word-break:       break-all;
    }
.showuploadfiles_ul > * fieldset {
    border:        1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px !important;
    padding:       10px;
    }
.showuploadfiles_ul > * fieldset:last-child {
    margin-bottom: 0 !important;
    text-align:    center;
    }
.showuploadfiles_ul > * fieldset:last-child legend {
    text-align: left;
    }
.showuploadfiles_ul > * > fieldset.firstfield {
    display:   flex;
    flex-flow: row wrap;
    }
.showuploadfiles_ul > * > fieldset.firstfield > ul {
    flex: 1;
    }
.showuploadfiles_ul > * fieldset legend {
    font-weight: bold;
    }
.showuploadfiles_ul > * fieldset ul {
    font-size:  12px;
    list-style: none;
    margin:     0 10px 0 0;
    padding:    0;
    }
.showuploadfiles_ul > * fieldset ul li {
    align-items: center;
    display:     flex;
    margin:      5px 0;
    }
.showuploadfiles_ul > * fieldset ul li > *:first-child {
    margin-right: 5px;
    max-width:    95px;
    width:        100%;
    }
.showuploadfiles_ul > * fieldset ul li > *:last-child {
    max-width:  220px;
    width:      100%;
    word-break: break-all;
    }
.fileedit {
    cursor:    pointer;
    font-size: 13px;
    }
.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;
    border-bottom: 1px solid #ddd;
    display:       flex;
    flex-flow:     row wrap;
    list-style:    none;
    margin:        0;
    padding:       0 0 10px 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;
    }
.flextitle {
    display:   flex;
    flex-flow: row wrap !important;
    }
.flextitle > *:first-child {
    flex: 1;
    }
.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;
    }
.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 {
    font-size:   12px;
    font-weight: lighter;
    height:      16px;
    line-height: 16px;
    margin-left: 5px;
    overflow:    hidden;
    }
.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 {
    display:       flex;
    height:        16px;
    line-height:   16px;
    margin-bottom: 3px;
    }
.viewerx .channel .channame {
    flex: 1 auto;
    }
.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;
    margin:        0 auto;
    }
.xarcgicon_cat {
    border-radius: 4px;
    display:       block;
    margin:        0 auto;
    width:         50px;
    }
.linfo {
    display:     block;
    font-size:   10px;
    font-weight: bold;
    margin-top:  5px;
    max-width:   200px;
    }
.emoji_panel {
    background: white;
    text-align: center;
    }
.emoji_panel > h2 {
    border-bottom: 1px solid #ddd;
    border-top:    1px solid #ddd;
    padding:       10px;
    }
.insert_emoji {
    cursor:      pointer;
    display:     inline-flex;
    font-size:   18px;
    height:      20px;
    margin:      5px;
    user-select: none;
    width:       20px;
    }
#song {
    overflow:    hidden;
    white-space: nowrap;
    }
#emosearch {
    margin-top: 10px;
    padding:    6px;
    border:     1px solid #ddd;
    }
.wn_hangman {
    display:     flex;
    align-items: center;
    }
.wn_hangman > span {
    margin-left: 10px;
    line-height: 18px;
    }
.wn_hangman > span small {
    display: block;
    }
/****************************************************
Mitglieder
*****************************************************/
.uletters {
    display:         flex;
    flex-flow:       row wrap;
    justify-content: space-around;
    }
.uletters > * {
    flex:   1;
    margin: 5px;
    }
a.mletter {
    background:    linear-gradient(to top, #ededed, #ebebeb);
    border:        #ccc 1px solid;
    border-radius: 4px;
    color:         black;
    padding:       5px 8px;
    transition:    background 0.3s linear;
    }
a.mletter:hover {
    background: #333;
    color:      white;
    }
a.mletter.active {
    background: #333;
    color:      white;
    }
/*****************************************************
Timeline
 ****************************************************/
.timeline {
    clear:      both;
    list-style: none;
    margin:     0;
    padding:    0;
    }
.timeline > li {
    background:    white;
    border:        1px solid #d1d1d1;
    border-radius: 4px;
    margin-bottom: 10px;
    padding:       10px;
    word-wrap:     break-word;
    }
.timeline > li img {
    max-width: 100%;
    }
.timeline > li > h2 {
    background:  #e9ebee;
    border:      1px solid #ddd;
    font-size:   13px;
    margin:      0 0 10px 0;
    padding:     5px;
    position:    relative;
    text-align:  center;
    text-shadow: 0 1px 1px white;
    }
.timeline > li > h2 > span {
    cursor:    pointer;
    font-size: 12px;
    position:  absolute;
    right:     10px;
    }
.timeline > li > small {
    padding-left: 60px;
    }
.timeline > li > small.flikenewsline {
    display:    block;
    margin-top: 10px;
    }
.timeline > li:last-child {
    margin-bottom: 0;
    }
.timeline > li .flex {
    align-items:   flex-start;
    display:       flex;
    flex-flow:     row wrap;
    margin-bottom: 10px;
    }
.timeline > li .flex > a > img {
    border-radius: 100%;
    margin-right:  10px;
    }
.timeline > li .flex > img {
    border-radius: 100%;
    margin-right:  10px;
    }
.timeline > li .flex > div {
    flex: 1;
    }
.timeline > li .flex > div h2 {
    display:   flex;
    flex-flow: row wrap;
    font-size: 14px;
    margin:    0 0 10px 0;
    }
.timeline > li .flex > div h2 > span {
    flex: 1;
    }
.timeline > li .flex > div h2 > span + span {
    flex: unset;
    }
.timeline > li .flex > div h2 > span + span i {
    cursor: pointer;
    }
.timeline > li .flex > div > div {
    align-items: flex-start;
    display:     flex;
    flex-flow:   row wrap;
    }
.timeline > li.newsentrie .flex > div > div {
    align-items: unset;
    display:     block;
    flex-flow:   unset;
    }
.timeline > li .flex > div > div.firmenakline {
    border-bottom:  1px solid #ddd;
    margin-bottom:  10px;
    padding-bottom: 10px;
    }
.timeline > li .flex > div > div > span {
    flex:          1;
    margin-bottom: 10px;
    }
.timeline > li .flex > div > div > i {
    cursor: pointer;
    }
.timeline > li .endline {
    border-top:  1px solid #ddd;
    display:     flex;
    margin-top:  10px;
    padding-top: 8px;
    user-select: none;
    }
.timeline > li .endline .likefcom,
.timeline > li .endline .commentf,
.timeline > li .endline .likefnews {
    cursor: pointer;
    }
.timeline > li .endline .likefcom > i,
.timeline > li .endline .commentf > i,
.timeline > li .endline .likefnews > i {
    margin-right: 5px;
    }
.timeline > li .endline .likefcom,
.timeline > li .endline .likefnews {
    margin-right: 10px;
    }
.timeline > li .endline .endflex {
    flex: 1;
    }
.timeline > li .endline p {
    cursor:  pointer;
    margin:  0;
    padding: 0;
    }
.timeline > li > form {
    border-top:  1px solid #ddd;
    display:     none;
    margin:      10px;
    padding-top: 10px;
    }
.timeline > li > form .fbuttons {
    margin-top: 5px;
    text-align: right;
    }
.timeline > li .flastcomments {
    display:    none;
    list-style: none;
    margin:     0;
    padding:    20px 20px 10px 20px;
    }
.timeline > li .flastcomments > li {
    margin-bottom: 10px;
    }
.timeline > li .flastcomments > li .flex {
    align-items: flex-start;
    display:     flex;
    }
.timeline > li .flastcomments > li:last-child {
    margin-bottom: 0;
    }
.timeline > li .flastcomments > li > small {
    padding-left: 40px;
    }
.timeline > li .flastcomments > li > small .fcomcomlike {
    cursor: pointer;
    }
.timeline > li .flastcomments > li .flex > span a > img {
    border-radius: 100%;
    margin-right:  15px;
    }
.timeline > li .flastcomments > li .flex .ltext {
    background:    #e9ebee;
    border-radius: 4px;
    max-width:     900px;
    padding:       10px;
    position:      relative;
    }
.timeline > li .flastcomments > li .flex .ltext .subthx {
    background:    white;
    border-radius: 4px;
    padding:       3px;
    position:      absolute;
    right:         -15px;
    top:           -7px;
    }
.timeline > li .flastcomments > li .flex .ltext:before {
    border-bottom: 9px solid transparent;
    border-left:   0 solid transparent;
    border-right:  8px solid #e9ebee;
    border-top:    0px solid transparent;
    content:       '';
    height:        0;
    left:          -8px;
    position:      absolute;
    top:           13px;
    width:         0;
    }
.timeline > li .flastcomments > li .flex .ltext i {
    cursor: pointer;
    }
/*****************************************************
Teammember
*****************************************************/
.teammember {
    padding:         0;
    margin:          0;
    list-style:      none;
    display:         flex;
    flex-flow:       row wrap;
    align-items:     center;
    justify-content: center;
    }
.teammember > li {
    flex:       1;
    text-align: center;
    }
.teammember > li > a {
    display: inline-block;
    }
.teammember > li div {
    line-height: 20px;
    margin-top:  5px;
    }
/*****************************************************
Cups
*****************************************************/
.cupcats {
    border: 1px solid #ccc;
    }
.cupcats legend {
    font-size:   13px;
    font-weight: bold;
    }
/*****************************************************
Trackbase
*****************************************************/
.trackbase_alben {
    background-color: white;
    list-style:       none;
    margin:           0;
    padding:          0;
    }
.trackbase_alben > li {
    font-weight: bold;
    }
.trackbase_alben > li:first-child > h2 {
    border-top: 0;
    }
.trackbase_alben > li > h2 {
    background:    #ddd;
    border-bottom: 1px solid #bbb;
    border-top:    1px solid #bbb;
    margin:        0;
    padding:       10px;
    }
.trackbase_alben > li > ul {
    list-style: none;
    margin:     0;
    padding:    10px;
    }
.trackbase_alben > li > ul > li {
    font-weight: normal;
    text-shadow: 0 1px 1px white;
    }
.trackbase_alben > li > ul > li > a {
    color:      #222;
    display:    block;
    padding:    10px;
    transition: background 0.2s linear;
    }
.trackbase_alben > li > ul > li a:hover {
    background-color: #ddd;
    }
.trackbase_alben > li > ul > li > a > dl {
    align-items: center;
    display:     flex;
    margin:      0;
    padding:     0;
    }
.trackbase_alben > li > ul > li > a > dl > dt {
    flex: 4;
    }
.trackbase_alben > li > ul > li > a > dl > dd {
    flex:       1;
    text-align: center;
    }
.trackbase_alben > li > ul > li > a > dl > dd:last-child {
    text-align: left;
    }
.trackbase_intrack {
    padding:  0 5px;
    position: relative;
    }
.trackbase_intrack .feedbackquestion {
    border-bottom: 1px solid #ccc;
    border-top:    1px solid #ccc;
    margin-top:    20px;
    padding:       20px 10px;
    text-align:    center;
    }
.trackbase_intrack > h2.titelh2 {
    align-items:      center;
    background-color: white;
    border-bottom:    2px solid #ccc;
    display:          flex;
    flex-flow:        row wrap;
    margin:           0 0 20px 0;
    padding:          5px 10px;
    }
.trackbase_intrack > h2 > i {
    cursor:    pointer;
    font-size: 30px;
    margin:    3px 10px 0 0;
    }
.trackbase_intrack > h2 > span {
    flex: 1;
    }
.trackbase_intrack > h2 > span .rating {
    align-self:     center;
    display:        inline-block;
    margin:         -5px 0 0 10px;
    vertical-align: middle;
    }
.trackbase_intrack > h2 > ul {
    align-items: center;
    display:     flex;
    list-style:  none;
    margin:      0;
    padding:     0;
    }
.trackbase_intrack > h2 > ul > *:first-child {
    margin-right: 5px;
    }
.trackbase_intrack > h2 > ul > * i {
    cursor:     pointer;
    display:    block;
    margin-top: -1px;
    }
@keyframes loading {
    0% {
        background-color: #eee;
        }
    50% {
        background-color: #ccc;
        }
    100% {
        background-color: #eee;
        }
    }
.loading wave {
    animation:        loading 2s linear infinite !important;
    background-color: #ccc;
    border-radius:    4px;
    height:           1px;
    width:            100%;
    }
.trackbase_intrack .timecode {
    padding-top: 10px;
    text-align:  right;
    }
.trackrate {
    display:        inline-block;
    margin:         -13px 0 5px 0;
    vertical-align: middle;
    }
.trackrate a {
    font-size: 30px !important;
    }
.trackrateform {
    border-bottom:  1px solid #ccc;
    margin-bottom:  20px;
    padding-bottom: 20px;
    }
.trackcomments {
    list-style: none;
    margin:     0;
    padding:    0;
    }
.trackcomments > * dl {
    background-color: #333;
    color:            white;
    display:          flex;
    margin:           0;
    padding:          10px;
    }
.trackcomments > * dl > dt {
    flex: 1;
    }
.trackcomments > * dl > dt > span {
    display:     inline-block;
    margin-left: 5px;
    }
.trackcomments > * p {
    padding: 5px;
    }
.trackcomments > *:last-child p {
    padding-bottom: 0;
    }
/*****************************************************
Radio
*****************************************************/
.radioplayer {
    border:        0;
    border-radius: 30px;
    height:        87px;
    margin:        0;
    padding:       0;
    width:         200px;
    }
.playradio {
    cursor:    pointer;
    font-size: 70px;
    }
.radiohinweis {
    color:       #999;
    line-height: 18px;
    margin-top:  10px;
    }
.wunschsong {
    display: block;
    margin:  30px auto 0 auto;
    width:   200px;
    }
.radiocontainer {
    color:          #d7d7d7;
    padding-bottom: 10px;
    text-align:     center;
    text-shadow:    0 1px 1px black;
    }
.radiocontainer > h2 {
    font-size: 14px;
    }
.radiocontainer .artists {
    display:    flex;
    flex-flow:  row wrap;
    list-style: none;
    margin:     0;
    padding:    0;
    text-align: left;
    }
.radiocontainer .artists > li {
    flex:        1 auto;
    font-size:   13px;
    font-weight: bold;
    margin:      0 10px 10px 0;
    }
.radiocontainer .artists > li > ul {
    color:       #999;
    display:     block;
    font-weight: normal;
    line-height: 20px;
    list-style:  none;
    margin:      0;
    padding:     0;
    }
.radiocontainer .radio_up {
    align-items:     center;
    background:      #121212;
    border-bottom:   1px solid #333;
    box-shadow:      0 3px 15px #121212;
    display:         flex;
    flex-flow:       row wrap;
    justify-content: center;
    list-style:      none;
    margin:          0 0 10px 0;
    padding:         0 0 10px 0;
    }
.radiocontainer .radio_up > li h2 {
    font-size: 13px;
    }
.radiocontainer .onradio#songs {
    padding-bottom: 0;
    }
.radiocontainer .radio_up > li {
    flex:     1;
    margin:   0 10px;
    position: relative;
    }
.radiocontainer .radio_up > li:first-child > a {
    align-items: center;
    display:     inline-flex;
    }
.radiocontainer .radio_up > li:first-child > a i {
    margin-right: 5px;
    }
.radiocontainer .radio_up > li:last-child {
    max-width: 300px;
    }
.radiocontainer .radio_up > li:last-child > ul {
    border:          0;
    display:         flex;
    justify-content: center;
    padding:         10px 0 0 0;
    width:           100%;
    }
.radiocontainer .radio_up > li:last-child > ul > li {
    flex:    none;
    padding: 10px;
    }
.radiocontainer #plist > ul {
    list-style: none;
    margin:     0;
    padding:    0;
    text-align: left;
    }
.radiocontainer #plist > ul li:first-child {
    padding-top: 0;
    }
.radiocontainer #plist > ul li {
    border-bottom: 1px solid #222;
    padding:       10px 0;
    }
.radiocontainer #plist > ul li:last-child {
    padding-bottom: 0;
    }
.radiocontainer #plist > ul li:last-child {
    border-bottom: 0;
    }
.radiocontainer #plist > ul li > small {
    color:       #d7d7d7;
    display:     block;
    font-size:   11px;
    font-weight: normal;
    margin-top:  5px;
    }
.radiocontainer #plist > ul li > span {
    color:       #777;
    font-size:   11px;
    font-weight: normal;
    }
#radio_cop {
    background: #121212;
    bottom:     0;
    box-shadow: 0 -3px 10px #121212;
    color:      #777;
    display:    block;
    padding:    10px;
    position:   fixed;
    right:      0;
    text-align: right;
    width:      100%;
    }
.radio_cal {
    display:    flex;
    flex-flow:  row wrap;
    list-style: none;
    margin:     0;
    padding:    0;
    text-align: left;
    }
.radio_cal > li {
    flex:      1;
    margin:    0 5px;
    word-wrap: break-word;
    }
.radio_cal ul {
    border-top: 1px solid #222;
    list-style: none;
    margin:     5px 0;
    padding:    0;
    }
.radio_cal ul > li {
    border-bottom: 1px solid #222;
    padding:       10px 0;
    }
.radio_cal ul > li:last-child {
    border-bottom:  0;
    padding-bottom: 0;
    }
.radio_cal ul > li > span {
    color:   #d7d7d7;
    display: block;
    }
a.radioacp {
    bottom:   10px;
    color:    white;
    position: fixed;
    right:    10px;
    }
.radioacp > span {
    color:       red;
    font-weight: bold;
    }
/***************************************************
Globale Klassen
****************************************************/
.mainh {
    display:        flex;
    flex-flow:      row wrap;
    align-items:    center;
    border-bottom:  1px solid #ddd;
    padding-bottom: 5px;
    }
.mainh > *:nth-child(2) {
    flex: 1;
    }
.mainh > ul {
    padding:     0;
    margin:      0;
    list-style:  none;
    display:     flex;
    align-items: center;
    }
.mainh > ul > li {
    margin: 0 3px;
    }
.around_slider {
    position:      relative;
    margin:        0 auto 0 auto;
    transition:    all 0.3s linear;
    height:        550px;
    border-radius: 10px;
    overflow:      hidden;
    }
.around_slider .sliderarrows {
    position:   absolute;
    padding:    0;
    margin:     0;
    list-style: none;
    z-index:    1000;
    opacity:    0;
    width:      100%;
    top:        36%;
    transition: all 0.3s linear;
    left:       50%;
    color:      white;
    transform:  translate(-50%, -50%);
    font-size:  50px;
    }
.around_slider .sliderarrows > li {
    position:   absolute;
    cursor:     pointer;
    opacity:    0.8;
    transition: all 0.3s linear;
    }
.around_slider .sliderarrows > li:hover {
    color:   var(--main-theme-color);;
    opacity: 1;
    }
.around_slider .sliderarrows > li.slicks-prev {
    left: 20px !important;
    }
.around_slider .sliderarrows > li.slicks-next {
    right: 20px !important;
    }
.around_slider:hover .sliderarrows {
    opacity: 1;
    }
.around_slider .newsslider {
    position:   relative;
    padding:    0;
    margin:     0 auto;
    list-style: none;
    }
.around_slider .newsslider li {
    position:            relative;
    background-size:     cover !important;
    height:              500px;
    border-radius:       0 0 10px 10px;
    z-index:             10;
    background-position: top center !important;
    background-repeat:   no-repeat !important;
    }
.newsslider li > div {
    position:      absolute;
    bottom:        0;
    /*! background-color: rgba(0, 0, 0, 0.7); */
    padding:       20px;
    font-size:     30px;
    width:         calc(100% - 40px);
    font-weight:   bold;
    text-shadow:   1px 1px 10px #000, 1px 1px 10px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 2px 0 #000;
    line-height:   25px;
    border-radius: 0 0 10px 10px;
    color:         var(--main-theme-color);
    border-bottom: 3px solid var(--main-theme-color);;
    }
.newsslider li > div > span {
    display:     block;
    margin-top:  10px;
    font-weight: normal;
    font-size:   16px;
    color:       white;
    }
.newsslider i {
    display:         block;
    opacity:         0;
    align-items:     center;
    color:           #999;
    cursor:          pointer;
    display:         inline-flex;
    font-size:       100px;
    justify-content: center;
    position:        absolute;
    top:             50%;
    transform:       translate(-50%, -50%);
    z-index:         10000;
    transition:      all 0.3s linear;
    }
.slicks-prev {
    left: 40px !important;
    }
.slicks-next {
    right: 20px !important;
    }
.newsslider:hover > i {
    opacity: 0.8;
    }
.newsslider i:hover {
    color: var(--main-theme-color);
    }
.slick-dots {
    position:        absolute;
    display:         flex;
    justify-content: center;
    padding:         0;
    list-style:      none;
    margin:          10px 0;
    width:           100%;
    }
.slick-dots > li {
    border-radius: 100%;
    margin:        0 8px;
    }
.slick-dots > li button {
    border-radius: 100%;
    padding:       5px;
    font-size:     0 !important;
    background:    #333;
    }
.slick-dots > li.slick-active button {
    background: var(--main-theme-color);
    }
.showsearch {
    display: none;
    }
/*****************************************************
Media Querys
*****************************************************/
@media only screen and (max-width: 1550px) {
    .sliderrsp {
        display: inline-block;
        }
    .rline {
        display: none;
        }
    .leftsidenav {
        display: none;
        }
    }
@media only screen and (max-width: 1100px) {
    #showsmiles {
        border-radius: 4px 0 6px 6px;
        left:          auto;
        right:         0;
        }
    .chatslider {
        left:  unset;
        right: 0;
        }
    #chatbox_nav {
        display: block;
        }
    #sharchiv {
        display: none;
        }
    #shoutform > ul {
        display: none;
        }
    #shoutform ul {
        background:     #333;
        border-radius:  4px;
        flex-flow:      column wrap;
        font-size:      11px !important;
        left:           auto;
        padding-bottom: 10px;
        right:          10px;
        top:            35px;
        z-index:        10;
        }
    #shoutform ul li button {
        font-size: 11px !important;
        width:     100%;
        }
    #shoutform ul li input {
        margin: 0 !important;
        }
    #showarchiv {
        display: block !important;
        }
    #showsend {
        display: none !important;
        }
    #shfirstsend {
        display: block !important;
        }
    }
@media only screen and (max-width: 1000px) {
    .xgallery-pic img {
        width: 100% !important;
        }
    header {
        height: 250px;
        }
    .messagecontainer.left .inhaltmessage .timeautor .chtime,
    .messagecontainer.right .inhaltmessage .timeautor .chtime {
        display: none;
        }
    nav.sticky {
        top: 69px;
        }
    #headline {
        line-height: normal;
        z-index:     1000;
        }
    #barmenu {
        margin-top: 5px;
        position:   unset;
        }
    #barmenu > li {
        font-size: 25px;
        position:  unset;
        }
    #barmenu > li > ul {
        left: 0;
        top:  80px;
        }
    #barmenu > li ul:before {
        display: none;
        }
    #xarcadeshowgame > div + div {
        max-width: 100% !important;
        }
    #barmenu {
        overflow-x: auto;
        overflow-y: hidden;
        }
    }
@media only screen and (max-width: 870px) {
    .djoverview > li {
        height: unset;
        }
    .xpstats > *:last-child {
        position: relative;
        top:      0;
        }
    .xarcadecomments,
    #xarcadekoms {
        width: 100% !important;
        }
    .outer {
        margin-bottom: 100px;
        }
    .headin .opensidebar {
        display: inline-block;
        }
    #xgame {
        width: 100% !important;
        }
    #xarcadeshowgame > div + div {
        flex: auto !important;
        }
    .xnoticontent {
        flex-flow: column wrap;
        width:     100%;
        }
    .xnoticontent > * {
        width: 100%;
        }
    .floatingbox {
        top: 18% !important;
        }
    #regdiv {
        top: 18% !important;
        }
    #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;
        }
    .headin {
        margin:  0 10px;
        padding: 5px 0;
        width:   auto;
        }
    #ticker_refresh {
        flex:  none;
        width: 100%;
        }
    #ustats {
        margin-right: 0 !important;
        }
    .mainnav {
        height: auto
        }
    .mainhmenu {
        height: auto
        }
    nav {
        background-image: linear-gradient(to bottom, #333, #1f1f1f);
        border:           1px solid #111;
        border-radius:    0 !important;
        box-shadow:       0 1px 0 rgba(255, 255, 255, .15) inset;
        box-sizing:       border-box;
        display:          none;
        height:           100vh;
        left:             0;
        overflow:         auto;
        position:         fixed !important;
        top:              78px !important;
        z-index:          1000;
        }
    nav.show {
        display: block;
        }
    nav > ul {
        display:     block;
        line-height: 40px;
        }
    nav > ul > li {
        text-align: left;
        }
    nav > ul > li > a {
        background: none;
        padding:    10px 20px;
        }
    nav > ul > li:first-child > a:before,
    nav > ul > li:last-child > a:before {
        border-radius: 0;
        }
    nav > ul > li ul {
        background:    none;
        border-bottom: 2px solid var(--main-theme-color);
        border-left:   2px solid var(--main-theme-color);
        border-right:  2px solid var(--main-theme-color);
        box-shadow:    none;
        line-height:   40px;
        opacity:       1;
        position:      relative;
        top:           0 !important;
        transition:    none;
        visibility:    visible;
        }
    nav > ul > li ul:hover {
        top: 0;
        }
    nav > ul > li ul > li > a {
        padding-left: 40px;
        }
    nav > ul li a i {
        display:   inline-block !important;
        font-size: 20px;
        margin:    0 10px 0 0;
        }
    nav > ul > li > a.playersonline:after {
        top:  17px;
        left: 145px;
        }
    #content {
        align-items: stretch;
        flex-flow:   column;
        }
    #middle,
    #explode {
        border-radius: 0;
        }
    #explode {
        margin: 0 5px;
        }
    .footer_song {
        margin-top: 5px;
        }
    footer {
        line-height: normal;
        }
    .footerin {
        flex-flow: column;
        padding:   10px 0;
        }
    nav.sticky {
        border-radius: 0 !important;
        height:        auto;
        left:          0;
        position:      relative;
        top:           0;
        transform:     none;
        width:         100%;
        }
    .mainhmenu.sticky {
        position: relative;
        top:      0;
        }
    header.com {
        height:     60px;
        margin-top: 125px;
        }
    header.com h2 {
        font-size: 50px;
        }
    header.com h2 span {
        font-size: 20px;
        }
    header.com #logo {
        height: 100px;
        }
    .headlogo {
        display: none;
        }
    #hmenu {
        border-radius: 6px 6px 0 0;
        }
    }
@media only screen and (max-width: 800px) {
    .ls.firmenheader > h2 {
        font-size: 16px;
        width:     60%;
        }
    .uptr,
    .commaster th {
        display: none;
        }
    .commaster td {
        display:    block;
        text-align: center;
        width:      auto !important;
        }
    .limg > div {
        display: block !important;
        }
    }
@media only screen and (max-width: 700px) {
    .radio_switch__indicator {
        display: none !important;
        }
    .radio_switch {
        max-width: 30.5rem !important;
        width:     100% !important;
        }
    header.xdesign h2 {
        font-size: 35px;
        }
    .djfilter {
        display:    none;
        position:   fixed;
        z-index:    1000;
        right:      10px;
        top:        66px;
        background: #222;
        }
    .showsearch {
        display: block !important;
        }
    .insert-comment-details .globalinsertcomment {
        background-color: #e9ebee;
        border:           0;
        border-radius:    10px;
        min-width:        200px;
        }
    .xgallery-pic > a.picnav {
        margin: 0 10px !important;
        }
    .xgallery-pic > a.picnav i {
        font-size: 20px !important;
        }
    .xpvisitors {
        margin: 0;
        }
    .xprofilcol {
        padding: 0 10px;
        }
    .xprofilcol > li {
        flex: 1 auto;
        }
    .xprofilcol > li > .xpavatar {
        margin: auto;
        }
    .newscontainer .newstext .nbild {
        float:       none;
        margin-left: 0 !important;
        max-height:  unset !important;
        max-width:   unset !important;
        }
    .newscontainer .newstext .nbild img {
        width: 100%;
        }
    }
@media only screen and (max-width: 500px) {
    .aboutdj {
        display: block;
        }
    .dj_sounds audio {
        width: 100%;
        }
    .xpinfos.xlgallery {
        margin-bottom: 10px !important;
        }
    .ls.left {
        flex:       none;
        text-align: center;
        width:      100% !important;
        }
    .newscontainer .nfooter {
        flex-flow:       column wrap;
        justify-content: center;
        }
    .newscontainer h2 img {
        display: none;
        }
    }
@media only screen and (max-width: 448px) {
    header.xdesign #logo {
        margin: 15px 0 -10px 0;
        height: 100px;
        }
    .newscontainer .newstext .nbild {
        margin: 0 10px 10px 10px;
        }
    #chatbox_nav {
        position: relative;
        right:    0;
        }
    .dblinks > li {
        margin: 10px 2px;
        }
    .newscontainer h2 img {
        display: none;
        }
    header.com h2 {
        font-size: 35px;
        }
    header.com h2 span {
        font-size: 15px;
        }
    #xarcadeshowgame {
        display: block !important;
        }
    }
@media only screen and (max-height: 700px) {
    .floatin,
    .regdiv {
        max-height: 350px !important;
        }
    }