:root {
     --red: #d4001f;
     --gray1: #202122;
     --gray2: #2a2a2d;
     --gray3: #7f7f87;
     --black: #000;
     --light: #c1c1c1;
     --light2: #c8c8c8;
}
 body {
     font: 300 16px Rubik, Verdana !important;
     line-height: 1.6 !important;
}
 main strong, main .arrow button, .title, .bold {
     font-weight: 700;
}
 .semi, .semiTitle, .btn {
     font-weight: 500;
}
 .title, .semiTitle, .btn {
     text-transform: uppercase;
     font-style: italic;
     text-align: center;
     line-height: 1.2;
}
 .title {
     font-size: 1.6rem;
}
 .semiTitle {
     font-size: 1.2rem;
}
 .text-black {
     color: var(--black);
}
 .text-gray {
     color: var(--light);
}
 .text-gray2 {
     color: var(--light2);
}
 .text-gray3 {
     color: var(--gray3);
}
 .text-gray3 {
     color: var(--gray3);
}
 .text-red {
     color: var(--red);
}
 .bg-red {
     background-color: var(--red);
}
 .bg-black {
     background-color: var(--black);
}
 .bg-gray1 {
     background-color: var(--gray1);
}
 .bg-gray2 {
     background-color: var(--gray2);
}
 .bg-caption {
     background-color: rgba(0, 0, 0, 0.7);
}
 header .icon {
     width: 20px;
     height: 20px;
}
 .noUnd a {
     text-decoration: none;
}
 .image.r1 {
     aspect-ratio: 1 / 1;
}
 .image.r34 {
     aspect-ratio: 3 / 4;
}
 .image.r64 {
     aspect-ratio: 6 / 4;
}
 p + p {
     margin-top: 15px;
}
 .space + .space {
     margin-top: 1rem;
}
 #menu .hover-primary {
     border-bottom: 2px solid transparent;
}
 #menu .hover-primary:hover {
     border-color: var(--bgp);
}
 .partner img {
     max-width: 180px;
     max-height: 80px;
}
 .bottom-0 {
     bottom: 0;
}
 .slider .mx-auto {
     max-width: 82vw;
}
 .arrow {
     top: 50%;
}
 .col {
     display: grid;
     grid-template-columns: auto;
     grid-auto-flow: column;
}
 .item + .item {
     margin-top: 1.5rem;
}
 table.colored tbody tr:nth-child(even) {
     background-color: var(--gray2);
}
 table {
     table-layout: auto;
}
 #tabs button {
     border-bottom: 4px solid;
     padding: 10px 10px 6px;
     outline: none;
}
 #tabs button:not(.active) {
     border-color: transparent;
}
 #tabs button.active {
     border-color: var(--red);
}
 .hidden {
     display: none !important;
}
 .border-full {
     border: 1px solid #999;
}
 .border-top {
     border-top: 1px solid #999;
}
 .bgGame {
     background: url("/images/games.png") no-repeat center center / cover;
}
 label, label span {
     display: block;
}
 .edit input, .edit select, .edit textarea {
     padding: 0.5rem;
     background-color: #fff;
     border: 1px solid var(--gray3);
     width: 100%;
     border-radius: 0.375rem;
}
 .edit input, .edit select, .edit .ready button {
     height: 49px;
}
 .checkbox {
     display: grid;
     grid-template-columns: 15px 1fr;
     grid-gap: 1rem;
}
 .checkbox input {
     width: 18px;
     height: 18px;
}
 .checkbox span {
     margin-top: -2px;
}
 .btn {
     padding: 0.5rem 1.5rem;
     border-radius: 0.375rem;
}
 #loginSocial svg {
     width: 30px;
     height: 30px;
}
 #loginSocial a + a {
     margin-left: 1rem;
}
.icon-white svg,
.icon-white path,
 #loginSocial svg {
     fill: var(--light);
}
 .icon-red svg {
     fill: var(--red);
}

#playersRankings td:not(.Pelaaja),
#playersRankings th:not(.Pelaaja){ text-align:center }

.listImage img { border-radius: 50% }

#closeMe {
     width: 38px;
     height: 38px;
}