/* Index Boardstats*/
.puzzlestat {
	display: grid;
    grid-template-rows: var(--bild-w) 32px 32px var(--sonder3);
    grid-template-columns: repeat(4, auto);
    padding-top: var(--space-xs);
    gap: var(--space-xs);
    margin-bottom: var(--space-xxs);
    margin-top: var(--space-xs);
}

#statbox .puzzleforumbitkategorie {
    margin-bottom:0px;
}

.puzzlestat .online, .puzzlestat .posts, .puzzlestat .onlinestat, .puzzlestat .zitat, .puzzlestat .partner {
    background-color: var(--colorbase2);
    box-shadow: var(--box-shadow2) var(--accent4);
    padding: var(--space-s);
    margin-top: var(--space-xxs);
}

/* Wer ist online Box */
.puzzlestat .online{
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-column-end: 2;
}

.puzzlestat .online .titel {
    background: var(--accent3);
    padding: 0px var(--space-m);
    border-left: var(--space-xs) solid var(--accent4);
    border-right: var(--space-xs) solid var(--accent4);
    transition: var(--fast);
    text-align: left;
    text-decoration: none;
    font-size: var(--main-xxs);
    font-family: var(--maintitle-font);
    font-weight: 200;
    color: var(--colorbase2);
    text-shadow: var(--shadow1) var(--accent4);
    text-transform: none;
    line-height: var(--main-s);
}

.puzzlestat .online .titel a{
    color: var(--colorbase2);
}

.puzzlestat .online .titel a:hover{
    color: var(--accent1);
}

.puzzlestat .online .onlinemember {
	margin: var(--space-l) var(--space-s);
    text-align: left;
    color: var(--colorbase1);
    font-size: var(--text-m);
    font-family: var(--subtext-font);
    line-height: var(--space-xxl);
    height: var(--sonder6);
    overflow-x: hidden;
}

.puzzlestat .online .onlinemember a {
    text-decoration: none;
    font-size: var(--text-m);
    line-height: var(--space-xxl);
    color: var(--accent3);
}

.puzzlestat .online .onlinemember a:hover{
	color:var(--accent1);
    text-decoration:underline;
}

.puzzlestat .online .onlinemember i{
    color: var(--accent4);
}

.puzzlestat .online .away .titel{
    background: var(--accent4);
    margin: var(--space-xxs) 2% var(--space-xxs) 1%;
    box-sizing: border-box;
    padding: var(--space-xxxs) var(--space-s);
    font-size: var(--text-l);
    font-weight: 400;
    color: var(--colorbase2);
    letter-spacing: var(--space-xxxs);
    text-align: left;
    position: relative;
    border-left: var(--space-xs) solid var(--accent3);
    border-right: var(--space-xs) solid var(--accent3);
    z-index: 1;
}
.puzzlestat .online .away i{
    display:none
}

/* Anzahl innerhalb der Rassen */
.puzzlestat .online .legende {
    margin-top: var(--space-m);
    text-align: justify;
    overflow: hidden;
    padding: var(--space-xxxs);
    background: var(--accent4);
    border: var(--border1) var(--color3);
    transition: var(--fast);
    color: var(--color3);
}

.puzzlestat .tooltip2 {
    display: inline-block;
    background: var(--colorbase28);
    text-align: center;
    transition: var(--fast);
    width: 32px;
    height: 30px;
    position: relative;
    background-color: var(--colorbase2);
    float: left;
    margin: var(--space-xxxs);
}

.puzzlestat .usergruppen2 {
    color: var(--accent3);
    /* text-shadow: var(--shadow1) var(--accent4); */
    padding: var(--space-xxxs) var(--space-xs);
    text-align: center;
    line-height: var(--space-xl);
}

.puzzlestat .usergruppen2 i {
    font-size: var(--text-l);
    padding: 0px var(--space-xxxs);
}

/* Inplayzitate */
.puzzlestat .zitat{
   grid-row-start: 1;
   grid-column-start: 2;
   grid-row-end: 2;
   grid-column-end: 3;
}

.puzzlestat .zitat .titel{ 
    margin: 0px;
    background: var(--accent3);
    padding: 0px var(--space-m);
    border-left: var(--space-xs) solid var(--accent4);
    border-right: var(--space-xs) solid var(--accent4);
    transition: var(--fast);
    text-align: left;
    text-decoration: none;
    font-size: var(--main-xxs);
    font-family: var(--maintitle-font);
    font-weight: 200;
    color: var(--colorbase2);
    text-shadow: var(--shadow1) var(--accent4);
    text-transform: none;
    line-height: var(--main-s);
}

.puzzlestat .zitat .zitatbox {
    padding: var(--space-m) 0px;
    text-align: left;
}

.puzzlestat .zitat .zitatbox img {
    position: relative;
    height: var(--sonder4);
    width: var(--sonder4);
    float: left;
    margin-right: var(--space-s);
    border-radius: 100%;
    background-image: var(--dekopng);
    background-size: cover;
    box-shadow: var(--box-shadow2) var(--accent3);
}

.puzzlestat .zitat .zitattext {
    height: var(--sonder3);
    overflow-x:hidden;
    color: var(--colorbase1);
    font-size: var(--text-m);
    font-family: var(--subtext-font);
    line-height: var(--space-xxl);
}

.puzzlestat .zitat .zitatuser {
    margin-top: var(--space-xxs);
    margin-bottom: -40px;
}

.puzzlestat .zitat .zitatuser span {
    padding: 0px var(--space-xs);
    margin-bottom: -3px;
	text-align: right;
}

.puzzlestat .zitat .zitatuser a, .puzzlestat .zitat .zitatlink a{
    text-decoration: none;
    font-family: var(--subtext-font);
    font-size: var(--text-m);
    font-style: italic;
    color: var(--accent3);
    line-height: var(--text-xl);
}

.puzzlestat .zitat .zitatuser a:hover, .puzzlestat .zitat .zitatlink a:hover{
	color: var(--accent1);
}

.puzzlestat .zitatbox .zitatlink {
    text-align: left;
    margin-bottom: -12px;
}

.puzzlestat .zitat .zitatlink a {
    color: var(--accent3);
}


/* Wer ist Online gewesen */
.puzzlestat .onlinestat {
   grid-row-start: 1;
   grid-column-start: 3;
   grid-row-end: 2;
   grid-column-end: 4;
}

.puzzlestat .onlinestat .titel2 {
    margin: 0px;
    background: var(--accent3);
    padding: 0px var(--space-s);
    border-left: var(--space-xs) solid var(--accent4);
    border-right: var(--space-xs) solid var(--accent4);
    transition: var(--fast);
    text-align: left;
    text-decoration: none;
    font-size: var(--main-xxs);
    font-family: var(--maintitle-font);
    font-weight: 200;
    color: var(--colorbase2);
    text-shadow: var(--shadow1) var(--accent4);
    text-transform: none;
    line-height: var(--main-s);
    letter-spacing: -0.7px;
}

.puzzlestat .onlinestat .titel2 a{
    color: var(--colorbase2);
}

.puzzlestat .onlinestat .titel2 a:hover{
    color: var(--accent1);
}

.puzzlestat .onlinestat .onlinebox {
    margin: var(--space-l) var(--space-s);
    text-align: left;
    color: var(--colorbase1);
    font-size: var(--text-m);
    font-family: var(--subtext-font);
    line-height: var(--space-xxl);
    height: var(--sonder6);
    overflow-x: hidden;
}

.puzzlestat .onlinestat .onlinebox a{
    text-decoration: none;
    font-size: var(--text-m);
    line-height: var(--space-xxl);
    color: var(--accent3);
}

.puzzlestat .onlinestat .onlinebox a:hover{
	color:var(--accent1);
    text-decoration:underline;
}

.puzzlestat .onlinestat .onlinebox  i{
    color: var(--accent4);
}

/* neustes Mitglied */
.puzzlestat .newbie {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 2;
    height: var(--space-bigger);
    position: relative;
    padding: var(--space-xxs);
    font-family: var(--subtext-font);
    background: var(--colorbase2);
    border: var(--border1) var(--color3);
    text-align: center;
    color: var(--colorbase1);
    transition: var(--fast);
    font-size: var(--text-m);
    line-height: var(--main-xxs);
}

.puzzlestat .newbie a{
    text-decoration: none;
    font-family: var(--subtext-font);
    font-size: var(--text-m);
    color: var(--accent3);
    font-weight: 600;
    line-height: var(--main-xxs);
}

.puzzlestat .newbie a:hover{
 
	color: var(--accent1);
}

/* Ministatistik */
.puzzlestat .buttons2 {
    grid-row-start: 2;
    grid-column-start: 2;
    grid-row-end: 3;
    grid-column-end: 4;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
    margin-left: -1px;
    margin-right: -2px;
}

.puzzlestat .buttons2 span {
    width: 95%;
    height: var(--space-bigger);
    position: relative;
    padding: var(--space-xxs);
    font-family: var(--subtext-font);
    background: var(--colorbase2);
    border: var(--border1) var(--color3);
    text-align: center;
    color: var(--colorbase1);
    transition: var(--fast);
    font-size: var(--text-m);
    line-height: var(--main-xxs);
}

.puzzlestat .buttons3 {
	grid-row-start: 3;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 4;
    height: var(--space-bigger);
    position: relative;
    padding: var(--space-xxs);
    font-family: var(--subtext-font);
    background: var(--colorbase2);
    border: var(--border1) var(--color3);
    text-align: center;
    color: var(--colorbase1);
    transition: var(--fast);
    font-size: var(--text-m);
    line-height: var(--main-xxs);
}

/* Partnerwerbung */
.puzzlestat .partner {
   grid-row-start: 4;
   grid-column-start: 1;
   grid-row-end: 4;
   grid-column-end: 4;
   margin-top: 0px;
}

.puzzlestat .partner .titel{
    margin: 0px;
    background: var(--accent3);
    padding: 0px var(--space-m);
    border-left: var(--space-xs) solid var(--accent4);
    border-right: var(--space-xs) solid var(--accent4);
    transition: var(--fast);
    text-align: left;
    text-decoration: none;
    font-size: var(--main-xxs);
    font-family: var(--maintitle-font);
    font-weight: 200;
    color: var(--colorbase2);
    text-shadow: var(--shadow1) var(--accent4);
    text-transform: none;
    line-height: var(--main-s);
}

.puzzlestat .partner .partnerbox{ 
    margin-top: var(--space-m);
    text-align: left;
    height: var(--main-m);
    overflow-x: hidden;
}

.puzzlestat .partner .partnerbox img {
    width: 73px !important;
    height: 30px !important;
    opacity: 0.8;
    position: relative;
    border: var(--border1) var(--color3);
    margin-right: var(--space-xxxs);
    margin-bottom: -4px;
}

/* Auslese Gruppen */
.puzzlestat .buttons {
    grid-row-start: 1;
    grid-column-start: 4;
    grid-row-end: 4;
    grid-column-end: 5;
    padding: 0px var(--space-s);
    margin-top: var(--space-xs);
    display: grid;
    grid-template-rows: repeat(7, auto);
}

.puzzlestat .tooltip {
    margin-right: -16px;
    margin-bottom: var(--space-xxs);
    height: var(--main-s);
    position: relative;
    right: var(--space-s);
    padding: var(--space-m);
    border: var(--border1) var(--color3);
    transition: var(--fast);
    text-align: center;
    line-height: var(--main-s);
    color: var(--colorbase1);
}

.puzzlestat .tooltip:last-child {
    background-color: var(--accent38) !important;
    color: var(--colorbase2);
    margin-bottom: -3px;
}

.puzzlestat .usergruppen {
}

.puzzlestat .tooltip .tooltiptext {
    visibility: hidden;
    max-width: var(--main-xxl);
    background: var(--colorbase2);
    font-family: var(--maintext-font);
    font-size: var(--text-s);
    letter-spacing: -0.5px;
    line-height: var(--space-xxl);
    color: var(--colorbase1);
    text-transform: uppercase;
    position: absolute;
    z-index: 10;
    bottom: 80%;
    margin-left: -35px;
    transition: opacity var(--fast);
    padding: var(--space-xxs) var(--space-xxs);
    box-shadow: var(--box-shadow2) var(--accent4);
}

.puzzlestat .tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.puzzlestat .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
}

/* Footer*/
#footer {
	background: var(--accent3);
	padding: var(--space-m) 0px;
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: auto 40% auto;
}

#footer .language {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-column-end: 2;
}

#footer .theme {
    grid-row-start: 1;
    grid-column-start: 3;
    grid-row-end: 2;
    grid-column-end: 4;
    margin-left: 17%;
}

.theme, .language {
  margin: 0px auto;
    text-align: center;
    color: var(--colorbase1);
    transition: var(--fast);
    font-size: var(--text-m);
}

.theme select, .theme input, .language select, .language input {
    float: left;
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}

.theme input, .language input {
    height: 29px;
    background: var(--colorbase28);
    border: var(--border1) var(--color3);
    margin: var(--space-xxs);
    margin-left: 0px;
	color: var(--colorbase1);
}

.theme select, .language select {
    background: var(--colorbase28);
    border: var(--border1) var(--color3);
    margin: var(--space-xxs);
	color: var(--colorbase1);
}

.theme input:hover, .theme select:hover, optgroup, .language input:hover, .language select:hover, optgroup {
    color: var(--colorbase2) !important;
    background: var(--colorbase1) !important;
}

.copyright {
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 2;
    grid-column-end: 3;
    justify-self: center;
    position: relative;
    width: 100%;
    margin-left: 7%;
    padding: var(--space-xxs);
    font-family: var(--subtext-font);
    background: var(--colorbase2);
    border: var(--border1) var(--color3);
    text-align: center;
    color: var(--colorbase1);
    transition: var(--fast);
    font-size: var(--text-m);
    line-height: var(--space-l);
}