@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
body {
    background-color: rgb(70, 70, 70);
    color: white;
    font-family: 'Rubik', sans-serif; 
    height: 100%;
    margin:0; 
    padding:0; 
    overflow-x: hidden;
}



.moderator {
  background-color: rgb(70, 70, 70);
  border-radius: 20px;
  display: block;
  margin: 10px;
  padding: 10px;
  width: 45%;
  text-align: center;
}
.user {
  background-color: grey;
  border: 1px solid black;
  border-radius: 20px;

}
.user-title {
  padding: 15px;
  border-radius: 20px 20px 0   0;
}
.user-body {
  padding: 10px;
}
.away {
  border: 2px solid #898787
}
.online {
  border: 2px solid #898787
}
.offline {
  border: 2px solid #898787
}

.moderator {
  background-color: rgb(70, 70, 70);
  border-radius: 20px;
  display: block;
  margin: 10px;
  padding: 10px;
  width: 45%;
  text-align: center;
}

.online-badge {
  background-color: #52c518;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 8px;
}

.away-badge {
  background-color: #cb6c0a;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 8px;
}
.offline-badge {
  background-color: #b92525;
  padding: 5px;
  font-size: 8px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  font-weight: bold;
}


@keyframes online {
  0% {
    box-shadow: 0 0 0px green;
  }
  50% {
    box-shadow: 0 0 20px green;
  }
  100% {
    box-shadow: 0 0 0px green;
  }
}
.online-badge {
  background-color: #52c518;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 8px;
}

.away-badge {
  background-color: #cb6c0a;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 8px;
}
.offline-badge {
  background-color: #b92525;
  padding: 5px;
  font-size: 8px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  font-weight: bold;
}
.apexcharts-menu{
background-color: #27293d!important;
border: 0px;
}
.current {
color: orangered !important;
}



@media screen and (min-width: 0px) and (max-width: 1200px) {
  #gametracker{ display: flex; }  /* show it on smaller screen */
}
@media screen and (min-width: 1201px) and up {
  #gametracker{ display: none; }   /* hide it on larger screens */
}
.dropdown-menu {
  background-color: #565656;
  
}
.dropdown-item {
  color: white;
  transition: color 0.2s ease-in-out;
}
.dropdown-item:hover {
  color: orange;
  background-color: transparent;
}
html {
  scroll-behavior: smooth;
}

.nav-link {
  color: white !important;
  font-size: 18px;
  transition: color 0.1s ease-in-out;
}


.nav-link:hover {
  color: rgb(255, 145, 0) !important;
}

.nav-item {
  padding: 10px;
}

.nav-brand {
  padding: 10px;
  width: 64px !important;
}

.navbar-wvc {
  background-color: rgb(46 46 46);
    z-index: 999999;
    width: 100%;
    right: unset;
    left: unset;
    padding: 0px;
}
.pre-loader {
    background-color: rgb(71, 71, 71);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: fixed;
    z-index: 999999999999;
}

@keyframes blink {
    0% {
        box-shadow: 15px 15px 15px orange;
    }
    50% {
        box-shadow: none;
    }
    100% {
        box-shadow: 15px 15px 15px orange;
    }
}

.pre-loader-img {
    position: absolute;
    margin: auto;
    top: 50vh;
    bottom: 50vh;
    left: 0;
    right: 0;
    width: 256px;
    height: auto;
    animation: animate 1.3s infinite;
}


@keyframes animate {
    0% { opacity: 0;  }
    50% { opacity: 1;  }
    100% { opacity: 0;  }
}

.online-badge {
  background-color: #52c518;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 12px;
}

.away-badge {
  background-color: #cb6c0a;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 12px;
}
.offline-badge {
  background-color: #b92525;
  padding: 5px;
  font-size: 12px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 20px;
  font-weight: bold;
}


.panel-link {
    float: right !important;
    background-color: rgb(255, 102, 0);
    border-radius: 10px;
    max-width: 100px;
    text-align: center;
}

.panel-link:hover {
    color: rgb(1, 120, 255) !important;
}
.panel-link {
    color: rgb(255, 255, 255) !important;
}

.nav-brand {
    width: 32px;
    height: auto;
}

.mini-nav {
    background-color: rgb(70, 70, 70);
    padding: 10px;
}

.rightbar {
  width: 305px;
  overflow: auto;
  z-index: 9999;
  font-size: 12px;
  background-color: #303032;
  border-radius: 10px;
  position:fixed;
  border: 1px solid #686868;
}

.right-bar-title {
  background-color: rgb(52 52 52);
  border-radius: 10px 10px 0px 0px;
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
}



.container2 {
  max-width: 1395px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}



/* The side navigation menu */
.sidebar {
    margin: 0;
    padding: 0;
    width: 250px;
    background-color: rgb(70, 70, 70);
    margin-bottom: -2350px; /* any large number will do */
    /* padding-bottom: 2350px; */
    overflow: auto;
    font-size: 12px;
    position: fixed;
    margin-top: 55px;
    border-right: 1px solid rgb(66 66 66);
  }
  
  /* Sidebar links */
  .sidebar a {
    font-size: 15px;
    display: block;
    color: rgb(255, 255, 255);
    padding: 20px;
    text-decoration: none;
    transition: background-color 0.5s;
  }

  .sidebar a i {
    margin-right: 10px;
  }
  
  /* Active/current link */
  .sidebar a.active {
    background-color: rgb(48, 48, 48);
    color: rgb(252, 113, 0);
    border-left: rgb(248, 99, 0) 5px solid;
    border-radius: 5px 0px 0px 5px;
  }
  
  /* Links on mouse-over */
  .sidebar a:hover:not(.active) {
    background-color: #555;
    color: white;
  }

  .menu-name {
    display: inline;
    margin-left: 0px;
    transition: margin-left 0.5s;
  }

  .sidebar a:hover .menu-name {
    margin-left: 10px;
  }
  
  /* Page content. The value of the margin-left property should match the value of the sidebar's width property */
  div.content {
   height: 100%;
  }
  
  /* On screens that are less than 700px wide, make the sidebar into a topbar */
  @media screen and (max-width: 700px) {
    .sidebar {
      display: none;
    }

    .sidebar a {float: left;}
    div.content {margin-left: 0;}
  }
  
  /* On screens that are less than 400px, display the bar vertically, instead of horizontally */
  @media screen and (max-width: 400px) {
    .sidebar a {
      text-align: center;
      float: none;
    }

  }


.hr-navbar {
    background-color: rgb(128, 126, 126);
    padding: 0.1px;
}
.header {
    width: 100%;
    padding-bottom: 0px;
    position: relative;
    display: grid;
}

.teamspeak-status {
    background-color: rgb(61, 61, 61);
    color:white;
    padding: 10px;
    border: 2px solid rgb(49, 49, 49);
    border-radius: 15px;
    width: 100%
}


.ts3-element {
    font-size: 14px;
}

.hero {
    margin-top: 40px;
}
.hero-text {
    font-size: 30px;
    text-align: center;
}
.hero-logo {
    width: 64px;
    height: auto;
    animation-delay: 2s;
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}


@-webkit-keyframes up-down {
    0% {
      width: 256px;
      transform: translateY(10px);
    }
    100% {
      width: 256px;
      transform: translateY(-10px);
    }
  }
  
  @keyframes up-down {
    0% {
      width: 256px;
      transform: translateY(10px);
    }
    100% {
      width: 256px;
      transform: translateY(-10px);
    }
  }

.stats {
  background: url('https://wvc.pl/assets/img/WVC4.png');
  padding-bottom: 50px;
  background-size: cover;
  padding-top: 50px;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid #686868;
}

.card-stats {
  background-color:  #141414;
  border: 2px solid orange;
  border-radius: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 10px;
} 

.bold {
  font-weight: bold;
}

.orange {
  color: orange;
}

.stats-text {
  font-size: 12px;
}

.stats-title {
  margin-bottom: 20px;
}


.subtitle-stats {
  margin-bottom:20px;
  font-size: 12px;
}

.subtitle {
  margin-bottom:20px;
  color: orange;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #222222; 
}
 
::-webkit-scrollbar-thumb {
  background: rgb(248, 99, 0); 
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(248, 99, 0); 
}

.why_us {
  background-color: #272727;
  padding-bottom: 50px;
  padding-top: 50px;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 1px solid #686868;
}

.card-about {
  background-color:  #141414;
  border: 2px solid orange;
  border-radius: 10px;
  padding-top: 100px;
  padding-bottom: 100px;
  margin: 10px;
  height: 270px;
}

.card-about-back {
  background-color:  #141414;
  border: 2px solid orange;
  border-radius: 10px;
  padding: 20px;
  margin: 10px;

  height: 270px;
}

.about-icon {
  font-size: 32px;
}

.card {
  margin: 10px 10px;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: auto;
  height: 350px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}



/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
}

.text-about {
  display: flex;
  align-items:center;
  justify-content:center;
  height: 200px;
  font-size: 14px;
}

.stats-container {
  display: flex;
  justify-content: center;
  flex-direction: row;
}


.connect {
  background-color: transparent;
  padding-top: 50px;
  padding-bottom: 50px;
}

.news {
  background: url('https://wvc.pl/assets/img/WVC3.png');
  padding-bottom: 50px;
  padding-top: 50px;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid #686868;
  margin-top: 20px;
  background-size: cover;

}

.card-news {
  min-height: 300px;
  background: rgb(70,70,70);
  background: radial-gradient(circle, rgba(70,70,70,1) 0%, rgba(56,56,56,1) 100%);
  border-radius: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.news-title {
  font-weight: bold;
}

.news-text {
  font-size: 12px;
}

.info-wave {
  width: 100%;
  background-color: #272727;
}

.copy-wave {
  height: 100px;
  width: 100%;
}

.informations {
  background-color: #393939;
  padding-bottom: 200px;
}

footer {
    padding-top: 20px;
    margin-top: 100px;
    position: relative;
    /* background: url(https://wvc.pl/assets/img/WVC1.png); */
    background-size: cover;
    background: #343435;
}

footer:after {
  background-color: aliceblue;
}

.hr-footer {
  padding: 0.1px;
}

.footer {
  margin-top: 30px;
}
.footer-info-text {
  font-size: 12px;
}

.footer-info-icons {
  font-size: 24px;
}

.copyright {
  padding-top: 30px;
  padding-bottom: 10px;
}

.copy-text {
  font-size: 12px;
}

.teamspeak-download {
  border: 1px solid #363434;
  border-radius: 10px;
  margin: 15px;
  box-shadow: 10px 10px 30px -11px rgb(0 0 0 / 75%);

}

.teamspeak-download-title {
  background-color: #363636;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  border-radius: 10px 10px 0px 0px;
}

.teamspeak-download-body {
  padding: 10px;
  background-color: #464646;
  border-radius:0px 0px 10px 10px ;
  text-align: center;
}

.top-users-body {
  padding: 10px;
  background-color: #464646;
  border-radius:0px 0px 10px 10px ;
  text-align: center;
}

.container-fluid {
  padding: 50px;
}

.recru-button {
  background-color: rgb(255, 136, 0);
  padding: 10px;
  color: black;
  font-size: 16px;
  border: none;
  border-radius: 20px;
  color: white;
  font-weight: bold;
  animation: recru 4s infinite;
}

@keyframes recru {
  0% {
    box-shadow: 0 0 0px orangered;
  }
  50% {
    box-shadow: 0 0 10px rgb(255, 145, 0);
  }
  100% {
    box-shadow: 0 0 0px orangered;
  }
}

.ts3-staff {
  background-color: #202020;
  margin: 10px;
  border-radius: 20px;
  padding: 20px;
}
.profile-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;

}
.ts3-staff .profile-center {
  text-align: center;
}
.ts3-staff .group {
  line-height: 8px;
}
.ts3-staff .list-stats {
  line-height: 10px;
}
.ts3-staff td, .ts3-staff tr, .ts3-staff th, .ts3-staff table {
  border: none;
  padding: 0;
  margin: 0;
  text-align: center;
  table-layout: fixed;
}
.ts3-staff .time {
  font-size: 12px;
}
.profile-link {
  color: white;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.1s ease-in-out;
}
.profile-link:hover {
  color: orange;
}
.servergroup-icon {
  width: 16px;
  height: 16px;
}
.profile-header
{
  background-color: #202020;
  border-radius: 10px;
  padding: 20px;
}
.profile-group {
  line-height: 5px;
}
.profile-header .profile-photo {
  width: 100px;
  height: 100px;
  margin-bottom: 30px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: -50px;
}
.profile-stats {
  background-color: #202020;
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  margin-top: 20px;
}
.stats-item {
  line-height: 10px;
}
.dataTables_wrapper {
  background: #404040;
    padding: 20px;
    border-radius: 20px;
}
      .dataTables_paginate span {
  background-color: #545454;
  border-radius: 10px;
  padding: 10px;
  text-decoration: none;
}
.paginate_button {
padding: 10px;

}

.dataTables_paginate a {
color: #fff;
transition: color .4s ease-in-out;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}

.dataTables_paginate a:hover {
text-decoration: none;
transition: color .4s ease-in-out;
color: orangered !important;
}
.previous, .next {
display: none;
}
table td {
  color: white !important;
  border-color: #4e4e4e;
}
table th {
  color: #b5b7c1 !important;
  border-color: #4e4e4e;
}
input, select {
  border-radius: 10px;
  border: none;
  background: #a3a3a3;
  padding: 5px;
}
.dataTables_length {
  position: absolute;
}
.dataTables_filter {
  margin-bottom: 20px;
}
.channel-join
{
  text-decoration: none;
  color: white;
  background-color: #ff5500;
  padding: 5px 20px;
  font-weight: bold;
  border-radius: 10px;
  font-size: 14px;
  animation: join-channel 5s infinite;
}
@keyframes join-channel {
  0% {
    box-shadow: 0 0 0px #ff5500;
  }
  50% {
    box-shadow: 0 0 10px #ff5500;
  }
  100% {
    box-shadow: 0 0 0px #ff5500;
  }
}
.channel-join:hover {
  color: white;
}
.profile-photo-list {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.rightbar-body {
  background-color: #323234;
  padding: 20px;
  border-radius: 10px;
}
.rightbar-item {
  margin-bottom: 20px;
}
.rightbar-item-title {
  font-weight: bold;
  margin-bottom: 15px;
}

.ts3-download-button {
  text-decoration: none;
  background-color: #3ca4e1;
  margin-right: 5px;
  color: white;
  font-weight: bold;
  padding: 5px;
  border-radius: 5px;
}

.ts3-download-button-2 {
  text-decoration: none;
  background-color: #e13cd3;
  margin-right: 5px;
  color: white;
  font-weight: bold;
  padding: 5px;
  border-radius: 5px;
}

.login {
    padding-top: 1px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 0;
    color: white;
    font-weight: bold;
    font-size: 11px;
}
.logout {
    text-decoration: none;
    color: red;
}

.container2 {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) {
    .container2 {
        width: 100%;
    }
}
@media (min-width: 992px) {
    .container2 {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container2 {
        width: 1170px;
    }
}