html {
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body {
    margin: 0px;
    padding: 0px;
    background: rgb(6,43,39);
    background: -moz-linear-gradient(175deg, rgba(6,43,39,1) 0%, rgba(0,0,0,1) 60%);
    background: -webkit-linear-gradient(175deg, rgba(6,43,39,1) 0%, rgba(0,0,0,1) 60%);
    background: linear-gradient(175deg, rgba(6,43,39,1) 0%, rgba(0,0,0,1) 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#062b27",endColorstr="#000000",GradientType=1);
    background-repeat: no-repeat;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    /* scrollbar-color: #18cc63 #16181c; */
    scrollbar-color: #18cc63 #00000050;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    /* background: #16181c; */
    background: #00000030;
}

*::-webkit-scrollbar-thumb {
    background-color: #18cc63;
    border-radius: 10px;
    /* border: 3px solid #16181c; */
    border: 3px solid #000;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#header {
    height: 70px;
    background-color: #1e1e1e;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

#header .header-wrapper .logo {
    width: 70px;
    height: 100%;
    background: red;
    display: flex;
    align-items: center;
    justify-content: center;
}

#app {
    background-color: #1e1e1e;
    height: 100vh;
    width: 100vw;
}

#app .header-wrapper {
    background-color: #222831;
    width: 100%;
    left: 0px;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    height: 70px;
    z-index: 2;
}

#app .navbar-wrapper {
    height: 100%;
    left: 0px;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    width: 300px;
    z-index: 2;
}

#app .navbar-wrapper .navbar-quick {
    background-color: #222831;
    height: 100%;
    pointer-events: all;
    width: 70px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#app .navbar-wrapper .navbar-quick .navbar-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0px;
    position: relative;
}

#app .navbar-wrapper .navbar-quick .navbar-section.serverCategoriesList {
    overflow-y: auto;
    height: 100%;
}

#app .navbar-wrapper .navbar-quick .navbar-section.serverCategoriesList::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

#app .navbar-wrapper .navbar-quick .navbar-section.serverCategoriesList::-webkit-scrollbar-thumb {
    background-color: transparent;
}

#app .navbar-wrapper .navbar-quick .navbar-section:nth-of-type(n + 1):not(:last-child):after {
    background-color: #3c3c3c;
    border-radius: 2px;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    bottom: -2px;
    transform: translateX(-50%);
    width: 50%;
}

.navbar-quick .navbar-item {
    background-color: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    height: 50px;
    padding: 0px;
    position: relative;
    width: 70px;
}

.navbar-quick .navbar-item:hover:after, .navbar-quick .navbar-item:focus:after, .navbar-quick .navbar-item.active:after {
    opacity: 1;
    transform: translateY(-50%);
}
.navbar-quick .navbar-item:hover .navbar-item-content, .navbar-quick .navbar-item:focus .navbar-item-content, .navbar-quick .navbar-item.active .navbar-item-content {
    background-color: #00ADB5;
    border-radius: 15px;
}
.navbar-quick .navbar-item:hover .tooltip {
    opacity: 1;
}
.navbar-quick .navbar-item.active:after {
    height: 40px;
}

.navbar-quick .navbar-item:after {
    background-color: #e6e6e6;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    content: "";
    height: 12px;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: height 300ms, opacity 300ms;
    width: 4px;
}

.navbar-quick .navbar-item:hover .navbar-item-content {
    background-color: #00ADB5;
    border-radius: 15px;
}

.navbar-quick .navbar-item .navbar-item-content {
    align-items: center;
    background-color: #393E46;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    margin: 0px 10px;
    height: 50px;
    transition: background-color 300ms, border-radius 300ms;
    width: 50px;
}

.navbar-quick .navbar-item .navbar-item-content i {
    color: #e6e6e6;
    font-size: 1.75em;
    height: 30px;
    line-height: 30px;
    text-align: center;
    transition: color 300ms;
}

.navbar-quick .navbar-item .navbar-item-content .navbar-item-icon {
    font-size: 25px;
    pointer-events: none;
}

.navbar-quick .navbar-item .navbar-item-content .navbar-item-image {
    background-position: center;
    background-size: cover;
    border-radius: inherit;
    height: inherit;
    width: inherit;
}

.navbar-quick .navbar-item .tooltip {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 150ms;
}

.navbar-quick .navbar-item .tooltip:after {
    background-color: #141414;
    content: "";
    height: 8px;
    position: absolute;
    width: 8px;
}

.navbar-quick .navbar-item .tooltip p {
    background-color: #141414;
    border-radius: 6px;
    color: #e6e6e6;
    font-weight: 500;
    padding: 10px 12px;
    white-space: nowrap;
}

.navbar-quick .navbar-item .tooltip.right {
    right: -9px;
    top: 50%;
    transform: translate(100%, -50%);
}

.navbar-quick .navbar-item .tooltip.right:after {
    left: 0px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.tooltipOLD:after {
    transform: translate(-50%, -50%) rotate(0deg);
    content: "";
    position: absolute;
    top: 65%;
    left: 0px;
    margin-top: -3px;
    border-top: 10px solid transparent;
    border-right: 10px solid #141414;
    border-bottom: 10px solid transparent;

}

.tooltipOLD {
    position: fixed;
    transform: translate(100%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms;
    width: 100px;
}

.tooltipOLD p {
    background-color: #141414;
    border-radius: 6px;
    color: #e6e6e6;
    font-weight: 500;
    padding: 10px 12px;
    white-space: nowrap;
    display: inline;
}

#app .navigator {
    background-color: #2f3136;
    border-top-left-radius: 8px;
    height: 100%;
    left: 70px;
    position: fixed;
    width: 230px;
}

#app .main-wrapper {
    background-color: #393E46;
    align-items: flex-start;
    display: flex;
    /* justify-content: flex-start; */
    margin-left: 300px;
    /* height: 100%; */
    flex-direction: column;
}

#gameserversList_wrapper {
    width: 100% !important;
    height: 100% !important;
    color: #e6e6e6;
}

div.dataTables_length {
    display: none;
}

#serverBox {
    filter: none;
}

#serverBox p {
    text-shadow: 1px 1px black, 1px 0 black, 1px -1px black, 0 -1px black, -1px -1px black, -1px 0 black, -1px 1px black, 0 1px black;
}

#serverBox:hover {
    transition: filter 0.2s ease-in-out;
    /* filter: sepia(1) hue-rotate(66deg) contrast(1.4) brightness(1) saturate(3); */
}

.boxGamemodesExtra{
    background: rgb(6,43,39);
    background: -moz-linear-gradient(175deg, rgba(6,43,39,.8) 0%, rgba(0,0,0,.8) 180%);
    background: -webkit-linear-gradient(175deg, rgba(6,43,39,.8) 0%, rgba(0,0,0,.8) 180%);
    background: linear-gradient(175deg, rgba(6,43,39,.8) 0%, rgba(0,0,0,.8) 180%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#062b27",endColorstr="#000000",GradientType=1);
    background-repeat: no-repeat;
}

/* .main-wrapper {
    height: 100vh;
    margin: 0;
    padding: 0;
  }

  #gameserversList {
    width: 100%;
    height: 100vh;
  } */

.mapImageList {
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 30%, transparent 70%);
}

#cc-main {
    /** Change font **/
    /* --cc-font-family: Roboto; */

    /** Change button primary color to black **/
    --cc-btn-primary-bg: #18cc63;
    --cc-btn-primary-border-color: #18cc63;
    --cc-btn-primary-hover-bg: #18cc63de;
    --cc-btn-primary-hover-border-color: #18cc63de;
    --cc-primary-color: #fff;
    --cc-secondary-color: #fff;

    /** Also make toggles the same color as the button **/
    --cc-toggle-on-bg: var(--cc-btn-primary-bg);

    /** Make the buttons a bit rounder **/
    --cc-btn-border-radius: 10px;

    --cc-bg: #112a28;

    --cc-footer-bg: var(--cc-bg);
    --cc-footer-border-color: rgba(255, 255, 255, 0.1);
    --cc-separator-border-color: rgba(255, 255, 255, 0.1);
    --cc-footer-color: rgba(255, 255, 255, 0.5);

    --cc-cookie-category-block-bg: rgb(255 255 255 / .15);
    --cc-cookie-category-block-border: rgba(255, 255, 255, 0.1);
    --cc-cookie-category-block-hover-bg:var(--cc-bg);
    --cc-cookie-category-block-hover-border: #18cc63;
 }

#cc-main .pm__badge {
    background: #18cc63;
}

.show--consent #cc-main .cc--anim .cm {
    border: 1px solid var(--cc-separator-border-color);
}

#cc-btn{
    position: fixed;
    bottom: 1rem;
    right: 1.5rem;
    z-index: 900;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    border: none;
    padding: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    background-color: rgba(24, 204, 99, 0.3);
    border: 2px solid #18cc63;
    justify-content: center;
    transition: background-color .3s ease,
                transform .3s ease,
                border-color .3s ease,
                opacity .3s ease,
                visibility .3s ease;
}

#cc-btn:hover{
    transform: translateY(-3px);
    background-color: #18cc63;
}

#cc-btn:active{
    background-color: #000;
    border-color: #000;
}

#cc-btn svg{
    fill: #18cc63;
    display: block;
    transition: fill .3s ease;
}

#cc-btn:hover svg{
    fill: #fff;
}

/* Hide button if modals are visible */
.show--consent #cc-btn,
.show--settings #cc-btn{
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
}

.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg, 
.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg, 
.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg {
  fill: #18cc63 !important;
}

@keyframes bounceOnce {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
}

.animate-bounceOnce {
    animation: bounceOnce 0.6s ease-out;
    animation-delay: 1s;
}
/*
     FILE ARCHIVED ON 21:29:14 Mar 31, 2025 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 02:05:27 Sep 05, 2025.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.563
  exclusion.robots: 0.028
  exclusion.robots.policy: 0.015
  esindex: 0.012
  cdx.remote: 95.246
  LoadShardBlock: 225.111 (3)
  PetaboxLoader3.datanode: 176.95 (5)
  PetaboxLoader3.resolve: 132.847 (2)
  load_resource: 749.163
  loaddict: 609.375
*/