/* Body CSS Starts */
:root {
    --backgroundcolor: rgba(0, 0, 0, 0.7);
}

body {
    background: url("../img/bg.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: arial;
}

h1 {
    font-weight: 700;
    font-size: 2.5rem;
}

a {
    text-decoration: none;
    color: white;
}

a:hover {
    text-decoration: none;
    color: red;
}

.btn {
    background: rgba(255, 0, 0, 0.7);
    color: white;
    font-size: 1rem;
    font-weight: bold;
}

.btn:hover {
    background: white;
    color: rgba(207, 0, 15, 1);
}

.btn1 {
    font-size: 1rem;
    font-weight: bold;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid red;
}

.btn-server {
    margin-bottom: 10px;
    min-width: 200px;
    font-size: 0.8rem;
}

.btn-server-small {
    margin-bottom: 10px;
    min-width: 100px;
    font-size: 0.8rem;
}

.btnselected {
    background: white;
    color: red;
    font-weight: bold;
}

.btn1:hover {
    background: white;
    color: red;
    font-weight: bold;
}

hr.white {
    border: 1px solid white;
    width: 80%;
}

hr.white2 {
    border: 1px solid white;
}

hr.whiteorder {
    border: 0.5px solid rgba(255, 255, 255, .5);
    width: 50%;
}

hr.whiteorder2 {
    border: 1.5px double rgba(255, 255, 255, .99);
    width: 95%;
}

/* Body CSS Ends */

/* Header CSS Starts */
.dropdown-menu {
    background-color: rgba(0, 0, 0, 0.8);
}

.dropdown-item {
    color: white;
}

.dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0);
    color: red;
}

.customnav {
    border-radius: 20px;
    background: var(--backgroundcolor);
}

.nav-link {
    font-size: 21px;
}
.nav-link-inv {
    font-size: 21px;
    background: rgba(0, 0, 0, 0);
}

.nav-link-right {
    padding-left: 30px;
    padding-right: 10px;
}
.nav-link-left {
    padding-left: 20px;
    padding-right: 30px;
}
.nav-link-mid {
    padding-left: 30px;
    padding-right: 30px;
}

/* Header CSS Ends */

/* Main Section CSS Starts */
#main {
    background: var(--backgroundcolor);
    border-radius: 20px;
    margin-top: 40px;
    color: white;
}

/* Main Section CSS Starts */
#maintest {
    background: var(--backgroundcolor);
    background: rgba(0, 0, 0, 0.0);
    border-radius: 20px;
    margin-top: 40px;
    padding: 0px;
    color: white;
}


#vipbtn {
    margin-top: 20px;
}

/* Main Section CSS Ends*/

/* Info Section CSS Starts*/
#info {
    margin-top: 30px;
    margin-bottom: 20px;
    color: white;
}

.info-box {
    border-radius: 20px;
    background: var(--backgroundcolor);
    padding: 20px;
}

.info-box p,
ul {
    text-align: justify !important;
}

.info-box h5 {
    text-align: center;
    font-weight: 700;
}

/* Info Section CSS Ends */

/* Footer Section CSS Starts*/
#footer {
    background-color: var(--backgroundcolor);
    border-radius: 10px;
    margin-bottom: 10px;
    color: white;
    font-size: 0.9rem;
    text-align: center;
}

.footer-box {
    margin-top: 10px;
}

.footer-cc {
    margin-bottom: 10px;
}

.footer-box li {
    list-style-type: none;
    text-align: center;
}

/* Footer Section CSS Ends*/

/* Server Page CSS Starts */

#servers {
    padding: 10px 0px;
    margin-bottom: 5px;
}

.serverItem {
    margin-bottom: 15px;
}

.serverItem span {
    font-size: 0.9rem;
    display: block;
    text-align: center;
    font-weight: bold;
    padding: 5px;
}

.hidden {
    display: none;
}

.form-inline .hidden {
    display: none;
}

/* Server Page CSS Ends */

/* VIP Page CSS Starts */

#tagline {
    font-size: 1.2rem;
}

#viptext {
    font-size: 1.2rem;
    font-weight: 600;
}

#vipbox {
    border-right: 1px solid white;
    border-width: 2px;
}

::placeholder {
    font-size: 0.875rem;
}

#ausfuehren {
    padding: 10 20px;
}

#vipsecondary {
    text-align: center;
}

#steamAvatar {
    float: left;
    margin-right: 15px;
}

#steamAvatarCircle {
    border-radius: 50%;
}

#steamName {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}

#steamNameNot {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

#steamclick {
    font-size: 0.8rem;
    text-align: center;
}

#steamreload {
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.3;
    font-weight: 600;
}

#steamURL {
    font-size: 0.8rem;
    position: relative;
    top: 30px;
}

#steamID {
    font-size: 0.8rem;
    position: relative;
    top: 30px;
}

#vipStatus {
    font-size: 0.8rem;
}

.steamdata {
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;

    min-height: 100px;
}

.steamdata3 {
    background: rgba(0, 0, 0, 0.0);
    padding: 10px;
    text-align: center;
}

.steamdata2 {
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
}

.steamdataborder {
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border: 1px solid white;
    min-height: 100px;
}

.steamdataborder2 {
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border: 1px solid white;
    min-height: 100px;
    text-align: center;
    vertical-align: middle;
}

.steamdatasum {
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 10px;
    border-top: 5px solid white;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    min-height: 100px;
}


.vipboxmain p {
    margin-bottom: 0px;
}

.steamInfoText {
    font-size: 0.8rem;
}

.steamInfo {
    float: right;
    padding-right: 10px;
    position: relative;
    bottom: 38px;
    right: 150px;
}

#vipTitle {
    font-size: 2.1rem;
    font-weight: 700;
    text-align: center;
    padding: 5px 0;
}

hr.white3 {
    border: 1px solid white;
    margin: 0px;
    margin-top: 10px;
}

hr.white4 {
    border: 1px solid white;
    margin: 0px;
    margin-bottom: 5px;
}

.plans {
    display: flex;
    justify-content: space-between;
    width: 91%;
}

#plan1 {
    background: rgba(133, 69, 247, 0.1);
    border: 2px solid #8545f7;
    margin: 10px;
}

#plan2 {
    background: rgba(205, 42, 223, 0.1);
    border: 4px solid #cd2adf;
    margin: 10px;
}

#plan3 {
    background: rgba(228, 73, 73, 0.1);
    border: 2px solid #e44949;
    margin: 10px;
}

#plan4 {
    background: rgba(196, 166, 5, 0.1);
    border: 2px solid #c4a605;
    margin: 10px;
}

#planHeading {
    text-transform: uppercase;
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
}

#planCost {
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
}

#planDuration {
    text-align: center;
    font-weight: lighter;
    font-size: 1.2rem;
    margin-top: -12px;
    text-transform: uppercase;
}

#planDurationFor {
    text-transform: lowercase;
    font-size: 0.9rem;
}

#planCostPerMonth {
    text-align: center;
    font-weight: bold;
    margin-top: -5px;
}

#includes {
    text-align: center;
    text-transform: uppercase;
    margin-top: 10px;
}

hr.white5 {
    border: 1px solid white;
    margin: 0px;
    margin-top: 10px;
}

.vipList {
    padding-left: 0px;
    padding-top: 5px;
    margin: 0px;
    margin-bottom: 10px;
}

.vipList li {
    font-size: 0.82rem;
    list-style-type: none;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

#planPaypal {
    display: block;
    margin: auto;
    padding-bottom: 15px;
}

.notesList {
    padding-left: 0px;
    padding-top: 5px;
    margin: 0px;
}

.notesList li {
    list-style-type: none;
    vertical-align: middle;
    text-align: left;
    line-height: 17px;
}

#vipBottomText {
    position: absolute;
    bottom: 0;
}

/* VIP Page CSS Ends */

/* Ranking Page CSS Starts */
#rankingTable {
    padding: 1rem;
    background: var(--backgroundcolor);
    border-radius: 20px;
    margin-top: 1rem;
    margin-bottom: 2rem;
    position: relative;
}

/* Ranking Page CSS Starts */
#rankingTable2403 {
    padding: 0rem;
    background: var(--backgroundcolor);
    border-radius: 20px;
    margin-top: 0rem;
    margin-bottom: 1rem;
}

#rankingTable2403glass {
    padding: 0rem;
    background: rgba(0, 0, 0, 0.0);
    border-radius: 20px;
    margin-top: 0rem;
    margin-bottom: 1rem;
}


#serverIPBtn {
    text-align: center;
    margin-right: 5px;
}

#rankingMain {
    color: white;
}

#regionHead {
    text-align: center;
    font-size: 1.5rem;
}

#regionServerName {
    text-align: center;
    font-size: 1.2rem;
}

#serverGameTrackImg {
    display: inline-block;
    margin-top: 10px !important;
    max-width: 555px;
    width: 100%;
}

#tableMonthlText {
    font-size: 1rem;
    text-align: justify;
    font-weight: bold;
}

#tableAvatar {
    float: left;
    width: 16;
    margin-right: 10px;
}

.page-link {
    color: red;
}

td {
    text-align: center;
    color: #d1d1d1;
}

th {
    padding: 5px 20px;
    color: white;
}

td {
    padding: 5px 5px;
    color: #d1d1d1;
}

.playerUNCLEAR {
    color: white;
    text-decoration: none;
    float: left;
    padding-top: 4px;
    font-size: 1rem !important;
}

.playerPRO {
    color: #e44949;
    text-decoration: none;
    font-weight: bold;
    float: left;
    font-size: 1.3rem !important;
}

.playerPRO2 {
    color: #e44949;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.3rem !important;
    text-align: center !important;
}

.playerVIP {
    color: #cd2adf;
    text-decoration: none;
    font-weight: bold;
    float: left;
    font-size: 1.2rem !important;
}

.playerVIP2 {
    color: #cd2adf;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem !important;
    text-align: center !important;
}

.steamlink32purple {
    color: #cd2adf;
    text-decoration: none;
    float: left;
}

.playerLEGEND {
    color: #c4a605;
    text-decoration: none;
    font-weight: bold;
    float: left;
    font-size: 1.5rem !important;
}

.playerLEGEND2 {
    color: #c4a605;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5rem !important;
    text-align: center !important;
}

.playerADMIN {
    color: #df0101;
    text-decoration: none;
    font-weight: bold;
    float: left;
}

.playerLEGIT {
    color: #6498e1;
    text-decoration: none;
    float: left;
}

.playerSMURF {
    color: white;
    text-decoration: none;
    float: left;
    padding-top: 5px;
    font-size: 0.9rem !important;
    vertical-align: middle !important;
}

#tablePlayerName {
    font-size: 1.1rem;
}

.tableColHead {
    text-align: center;
    font-size: 0.8rem;
}

#tableUpdateTime {
    float: right;
    font-size: 0.8rem;
    font-weight: bold;
    margin-top: -10px;
    background: rgba(0, 0, 0, 0.8);
    color: #d1d1d1;
    padding: 5px;
    border-radius: 5px;
}

.pagination {
    margin-top: -40px;
}

.pagination > li > a {
    background: rgba(0, 0, 0, 0.8);
    color: white;
}

.pagination > li > a:hover {
    background: white;
    color: #0f0f0f;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
}

.table-striped > tbody > tr:nth-child(even) > td,
.table-striped > tbody > tr:nth-child(even) > th {
    background-color: rgba(0, 0, 0, 0.8);
    border: none;
    /*border: 1px solid black !important;*/
}

#tableItem {
    text-align: center;
    vertical-align: middle;
    padding: 1px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#tableItemBig {
    text-align: center;
    vertical-align: middle;
    min-width: 250px;
}





#navigationTable {
    padding-top: 1rem;
    background: var(--backgroundcolor);
    border-radius: 20px;
    margin-top: 0rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    text-align: center
}

#navigationTable2 {
    padding-top: 1rem;
    background: var(--backgroundcolor);
    border-radius: 20px;
    margin-top: 20px;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

#navigationTable3 {
    padding-top: 0rem;
    background: var(--backgroundcolor);
    border-radius: 20px;
    margin-top: 2rem;
    padding-bottom: 0rem;
    margin-bottom: 2rem;
    text-align: center;
}

#quickjoinBtns {
    /*padding-bottom: 1rem;*/
}

.quickjoinBtns .btn {
    margin: 5px;
    min-width: 150px;
}

.quickjoinBtns .btngreen {
    background-color: green;
}

.quickjoinBtns .btngrey {
    background-color: grey;
}

.quickjoinBtns .btngrey:hover {
    background-color: grey;
    cursor: not-allowed;
}

#quickjoinBtns {
    /*padding-bottom: 1rem;*/
}

#quickjoinBtns .btn {
    margin: 5px;
    min-width: 150px;
}

#quickjoinBtns .btngreen {
    background-color: green;
}

#quickjoinBtns .btngrey {
    background-color: grey;
}

#quickjoinBtns .btngrey:hover {
    background-color: grey;
    cursor: not-allowed;
}


#rankingBtns {
    /*padding-bottom: 1rem;*/
}

#rankingBtns .btn {
    margin: 5px;
    min-width: 150px;
}

#rankingBtns .btn {
    margin: 5px;
    min-width: 150px;
}

.rankingLinks {
    margin-top: 1rem;
}


/* Ranking Page CSS Ends */

/* Rules Page CSS Starts */
#rulesBox {
    margin-top: 2rem;
    background: var(--backgroundcolor);
    border-radius: 20px;
    color: white;
    padding: 30px;
    margin-bottom: 20px;
}

#accordionExample {
    padding-bottom: 1rem;
}

.accordionExample {
    background: var(--backgroundcolor);
    border-radius: 10px;
}

/* Rules Page CSS Ends */

.customTable {
    margin-top: 2rem;
    border: none;
}

.customTable tbody tr:nth-child(odd) td,
.customTable tbody tr:nth-child(odd) th {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
}

.customTable tbody tr:nth-child(even) td,
.customTable tbody tr:nth-child(even) th {
    background-color: rgba(0, 0, 0, 0.8);
    border: none;
}

.customTable thead th {
    background: rgba(0, 0, 0, 0.8);
    border: none;
}

.imprintBox {
    text-align: center;
    margin-top: 20px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
}

.imprintBox p {
    margin: 0px;
}

.tos {
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px;
}

.credit {
    background: rgba(0, 0, 0, 0.7);
    padding: 20px;
}

.proBtn {
    min-width: 150px;
}

#aboutImg {
    border-radius: 100%;
    width: 184px;
    border: 5px solid silver;
}

#orderImg {
    border-radius: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    border: 3px solid silver;
}

#orderImgRed {
    border-radius: 50%;
    width: 92px;
    max-width: 50%;
    border: 3px solid red;
}

#orderImgPurple {
    border-radius: 50%;
    width: 92px;
    max-width: 50%;
    border: 3px solid rebeccapurple;
}

#orderImgOrange {
    border-radius: 50%;
    width: 92px;
    max-width: 50%;
    border: 3px solid orange;
}

#orderImgGreen {
    border-radius: 50%;
    width: 92px;
    max-width: 50%;
    border: 3px solid green;
}

#aboutRole {
    font-size: 1.25rem;
    text-align: center;
}

#aboutName {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

#aboutInfo {
    text-align: justify;
}

.cleantable {
    width: 100%;
    text-align: left;
    vertical-align: top;
    border: 0px;
    color: white;
    background-color: rgba(0, 255, 0, 0.0);
}

.cleantable1stitem {
    text-align: left;
    vertical-align: top;
    width: 25%;
    border: 10px;
    background-color: rgba(255, 0, 0, 0.0);
}

.cleantable2nditem {
    text-align: left;
    vertical-align: top;
    border: 0px;
    color: white;
    background-color: rgba(0, 0, 0, 0.0);
}


.tooltip2 {
    position: absolute;
    height: 128px;
    width: 128px;
    display: inline-block;
}

.tooltip2 .tooltiptext2 {
    visibility: hidden;
    width: 0px;
    overflow: hidden;
    white-space: nowrap;
    color: #fff;
    color: rgba(255, 255, 255, 0.0);
    text-align: left;
    border-radius: 6px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.0);

    /* Position the tooltip */
    position: absolute;
    left: 74px;
    top: 90px;
    z-index: 1;
    -webkit-transition: all 0.6s linear;
}

.tooltip2:hover .tooltip2img {
    width: 152px;
    position: absolute;
    left: -12px;
    top: -12px;
    z-index: 1;
    -webkit-transition: all 0.6s linear;
}

.tooltip2img {
    width: 124px;
    position: absolute;
    left: 0px;
    top: 0px;
    -webkit-transition: all 0.6s linear;
}

.tooltip2:hover .tooltiptext2 {
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 1.0);
    width: 260px;
    left: 82px;
    top: 100px;
    -webkit-transition: all 0.6s linear;
}


.headline-table {
    margin: 0px auto;
    padding: 0px auto;
}

.headline-table td {
    padding: 5px;
    font-size: 25px;
}

.headline-right-align {
    width:50%;
    text-align: right;
}

.headline-left-align {
    width:50%;
    text-align: left;
    color: red;
}

.box2403 {
    margin: 0px auto;
    padding: 0px auto;
    padding-top: 11px;
    padding-bottom: 10px;
}

.nomargin {
    position: relative;
    margin: 0px auto;
    padding: 0px auto;
    border: 0px auto;
}
.centerheadline {
    text-align: center;
    color: red;
}

.serverbannerleft {
    position: absolute;
    width: 286px;
    left: -1300px; /* 260px nach links verschieben */
    top: 192px;
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.0);
}

body:hover .serverbannerleft {
    position: absolute;
    width: 286px;
    left: -300px; /* 260px nach links verschieben */
    top: 192px;
    background-color: rgba(0, 0, 0, 0.0);
    visibility: visible;
    transition: all 1.0s ease;
}
body:not(:hover) .serverbannerleft {
    position: absolute;
    width: 286px;
    left: -1300px; /* 260px nach links verschieben */
    top: 192px;
    background-color: rgba(0, 0, 0, 0.0);
    visibility: hidden;
    transition: all 1.0s ease;
}

.serverbannerTable {
    padding-top: 1rem;
    background: var(--backgroundcolor);
    border-radius: 20px;
    margin-top: 0rem;
    padding-bottom: 2rem;
    padding-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
    width: 100%;
}

.navigationTableServers {
    position: absolute;
    top: 182px;
    right: -1000px;
    width: 93%;
    padding-top: 1rem;
    background: var(--backgroundcolor);
    border-radius: 20px;
    margin-top: 20px;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    visibility: hidden;
    transition: all 0.5s ease;
}

body:hover .navigationTableServers {
    position: absolute;
    top: 182px;
    right: 12px;
    width: 93%;
    background: var(--backgroundcolor);
    border-radius: 20px;
    text-align: center;
    visibility: visible;
    transition: all 0.5s ease;
}
body:not(:hover) .navigationTableServers {
    position: absolute;
    top: 182px;
    right: -1000px;
    width: 93%;
    background: var(--backgroundcolor);
    border-radius: 20px;
    text-align: center;
    visibility: hidden;
    transition: all 2.5s ease;
}