.servercontainer {
    padding : 10px;
    width   : 280px;
    }
.tsservercontainer {
    margin-left : -15px;
    max-height  : 400px;
    overflow    : hidden;
    padding     : 10px;
    width       : 280px;
    }
.loader {
    display        : inline-block;
    margin-left    : 5px;
    opacity        : 0;
    vertical-align : middle;
    }
.serverin {
    border-bottom : 1px solid #dddddd;
    height        : 30px;
    line-height   : 30px;
    }
.serverfirst {
    display        : inline-block;
    padding        : 0 2px 0 2px;
    vertical-align : middle;
    width          : 150px;
    }
.serversec {
    display        : inline-block;
    vertical-align : middle;
    }
.mapcontainer {
    margin     : 10px;
    text-align : center;
    }
.mapcontainer img {
    border        : 1px solid #dddddd;
    border-radius : 2px;
    height        : 100px;
    padding       : 1px;
    width         : 182px;
    }
.playercontainer {
    }
.playfirstline {
    background    : rgba(221, 221, 221, 0.50);
    border-bottom : 1px solid #dddddd;
    height        : 30px;
    line-height   : 30px;
    }
.playone {
    display        : inline-block;
    padding        : 0 2px 0 2px;
    vertical-align : middle;
    width          : 150px;
    }
.playtwo {
    display        : inline-block;
    vertical-align : middle;
    width          : 60px;
    }
.playthree {
    display        : inline-block;
    vertical-align : middle;
    }
#r2line {
    position : fixed;
    top      : 250px;
    z-index  : 999;
    }
#r4line {
    position : fixed;
    top      : 310px;
    z-index  : 999;
    }
#rtline {
    position : fixed;
    top      : 210px;
    z-index  : 999;
    }
#raline {
    position : fixed;
    top      : 300px;
    z-index  : 999;
    }
#ircline {
    position : fixed;
    top      : 430px;
    z-index  : 999;
    }
#rtspiele {
    position : fixed;
    top      : 120px;
    z-index  : 999;
    }
.rline {
    background    : rgba(0, 0, 0, 0.6);
    border-radius : 0 10px 10px 0;
    border-right  : 3px solid darkorange;
    box-shadow    : 1px 3px 12px rgba(0, 0, 0, 0.7);
    cursor        : pointer;
    height        : 40px;
    left          : -7px;
    padding       : 10px;
    position      : relative;
    transition    : all 0.3s linear;
    user-select   : none;
    width         : 48px;
    }
.rline img {
    left      : 50%;
    position  : absolute;
    top       : 50%;
    transform : translate(-50%, -50%);
    width     : 48px;
    }
.rline:hover {
    background : rgba(0, 0, 0, 0.8);
    left       : 0;
    }
.rline.select {
    background : rgba(0, 0, 0, 0.8);
    left       : 0;
    }
.vieweroutput {
    background    : #ffffff;
    border-bottom : 2px solid #ababab;
    border-radius : 4px;
    box-shadow    : 0 0 10px black;
    font-size     : 14px;
    left          : 50%;
    opacity       : 0;
    padding       : 5px;
    position      : fixed;
    top           : 50%;
    transform     : translate(-50%, -50%);
    transition    : transform 0.2s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    visibility    : hidden;
    width         : 320px;
    z-index       : 9999;
    }
.vieweroutput.select {
    opacity    : 1;
    visibility : visible;
    }
.viewin {
    max-height : 400px;
    overflow   : hidden;
    padding    : 10px 0 5px 0;
    }
.viewscroll {
    max-height : 400px;
    overflow   : hidden;
    }
.servertitle {
    background          : url(images/devil_newsback.png);
    background-position : -140px 20px;
    color               : white;
    font-size           : 14px;
    height              : 40px;
    line-height         : 40px;
    padding-left        : 10px;
    position            : relative;
    text-shadow         : 0 1px 1px #34495e;
    z-index             : 9999;
    }
.servertitle:hover {
    cursor : crosshair;
    }
.closeviewer {
    color       : #ffffff;
    cursor      : pointer;
    float       : right;
    font-weight : bold;
    height      : 15px;
    line-height : 14px;
    margin      : 5px 10px 0 0;
    text-align  : center;
    width       : 15px;
    }
.titlein {
    display        : inline-block;
    vertical-align : middle;
    }
#tsjoin {
    color       : white;
    position    : absolute;
    right       : 50px;
    text-shadow : 0 1px 1px #000;
    top         : 0;
    transition  : all 0.3s linear;
    }
#tsjoin:hover {
    color : darkorange;
    }
.servertable {
    display      : table;
    table-layout : fixed;
    width        : 100%;
    }
.servertable .row {
    display : table-row;
    }
.servertable .rowfirst {
    background : #000;
    display    : table-row;
    }
.servertable .rowfirst .cell {
    border-bottom : 1px solid #333;
    border-top    : 1px solid #333;
    color         : white;
    display       : table-cell;
    padding       : 4px;
    }
.servertable .row .cell {
    display : table-cell;
    padding : 4px;
    }
.serverpic {
    border-bottom : 1px solid #ddd;
    border-top    : 1px solid #ddd;
    margin        : 10px 0 10px 0;
    padding       : 10px 0 10px 0;
    text-align    : center;
    width         : 100%;
    }
.serverpic img {
    height : 120px;
    width  : 160px;
    }
.gamerstable {
    background : #ccc;
    max-height : 400px;
    overflow   : auto;
    }
.rline span {
    background    : #333;
    border        : 2px solid darkorange;
    border-radius : 100%;
    color         : darkorange;
    font-size     : 12px;
    font-weight   : bold;
    height        : 22px;
    line-height   : 22px;
    position      : absolute;
    right         : -10px;
    text-align    : center;
    text-shadow   : 0 1px 1px black;
    top           : -10px;
    width         : 22px;
    }
.rline p {
    animation     : pglow 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    background    : red;
    border        : 2px solid darkorange;
    border-radius : 100%;
    bottom        : -10px;
    font-size     : 12px;
    font-weight   : bold;
    height        : 20px;
    line-height   : 22px;
    margin        : 0;
    padding       : 0;
    position      : absolute;
    right         : -10px;
    text-align    : center;
    text-shadow   : 0 1px 1px black;
    width         : 20px;
    }
@keyframes pglow {
    0% {
        background : red;
        }
    50% {
        background : #333;
        }
    100% {
        background : red;
        }
    }
#ircframe {
    background    : #ffffff;
    border-bottom : 2px solid #ababab;
    box-shadow    : 0 0 10px black;
    font-size     : 14px;
    left          : 34%;
    opacity       : 0;
    padding       : 5px;
    position      : fixed;
    top           : 27%;
    transform     : scale(0.2);
    transition    : transform 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    visibility    : hidden;
    width         : 800px;
    z-index       : 9999;
    }
#ircframe iframe {
    height   : 560px;
    position : relative;
    width    : 796px;
    }
#ircframe.select {
    opacity    : 1;
    transform  : scale(1);
    visibility : visible;
    }
.xserverstatus {
    border-radius : 4px;
    color         : white;
    padding       : 5px 10px;
    }
.xserverstatus.online {
    background : green;
    }
.xserverstatus.offline {
    background : indianred;
    }
.xserverstatus.xgin {
    font-size   : 12px;
    margin-left : 5px;
    }
.xgameservertitle {
    border-bottom  : 1px solid #ddd;
    color          : #222;
    font-size      : 16px;
    font-weight    : normal;
    margin-top     : 5px;
    padding-bottom : 5px;
    position       : relative;
    }
.xgameservertitle > a {
    font-size : 13px;
    position  : absolute;
    right     : 0;
    top       : -9px;
    }
.xgameserverdetails {
    align-items : flex-start;
    display     : flex;
    list-style  : none;
    margin      : 0 0 0 0;
    padding     : 5px 0 0 0;
    }
.xgameserverdetails > * {
    flex : 1;
    }
.xgameserverdetails > *:first-child > dl {
    color     : #333;
    font-size : 13px;
    margin    : 0;
    padding   : 0;
    }
.xgameserverdetails > *:first-child > dl > dt {
    font-weight   : bold;
    margin-bottom : 10px;
    }
.xgameserverdetails > *:first-child > dl > dd {
    margin  : 0 0 10px 0;
    padding : 0;
    }
.xgameserverdetails > *:last-child > div {
    height   : 250px;
    margin   : 0 5px 0 auto;
    overflow : hidden;
    position : relative;
    width    : 300px;
    }
.xgameserverdetails > *:last-child > div img {
    height   : 100%;
    position : absolute;
    width    : 100%;
    }
.xgameserverdetails > *:last-child > div > span {
    background : rgba(0, 0, 0, 0.5);
    bottom     : 0;
    color      : white;
    display    : block;
    font-size  : 14px;
    padding    : 5px 10px;
    position   : absolute;
    text-align : center;
    width      : 100%;
    }