:root {
    color-scheme: dark;

    --color-bg: #0f1013;
    --color-bg-highlight: #ffffff0e;
    --color-bg-highlight-more: #ffffff17;
    --color-bg-highlight-more-hover: #ffffff2a;
    --color-bg-highlight-bg: #282b2e;
    --color-bg-indent: #070808;
    --color-text-on-highlight-faint: rgba(255, 255, 255, 0.6);


    --status-indicator-size: 7px;
    --status-indicator-animation-duration: 2.5s;

    --status-indicator-color: rgb(216, 226, 233);
    --status-indicator-color-semi: rgba(216, 226, 233, .6);
    --status-indicator-color-transparent: rgba(216, 226, 233, 0);

    --status-indicator-color-active: rgb(0, 149, 255);
    --status-indicator-color-active-semi: rgba(0, 149, 255, .6);
    --status-indicator-color-active-transparent: rgba(0, 149, 255, 0);

    --status-indicator-color-positive: rgb(75, 210, 143);
    --status-indicator-color-positive-semi: rgba(75, 210, 143, .6);
    --status-indicator-color-positive-transparent: rgba(75, 210, 143, 0);

    --status-indicator-color-intermediary: rgb(255, 170, 0);
    --status-indicator-color-intermediary-semi: rgba(255, 170, 0, .6);
    --status-indicator-color-intermediary-transparent: rgba(255, 170, 0, 0);

    --status-indicator-color-negative: rgb(255, 77, 77);
    --status-indicator-color-negative-semi: rgba(255, 77, 77, .6);
    --status-indicator-color-negative-transparent: rgba(255, 77, 77, 0);
}

a, span, button, label, div {
    -webkit-tap-highlight-color: transparent;
}

/* ================================================== Elements */
body {
    background-color: var(--color-bg);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgba(255, 255, 255, 0.82);
    text-align: center;
    margin: 0;
}
h1, h2, h3, th {
    font-weight: 500;
    margin: 0;
}
.h3-text {
    margin-top: 20px;
    margin-bottom: 10px;
}
button {
    background-color: #0077ff;
    border-width: 0;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: background-color 0.3s ease;
}
button:hover {
    background-color: #2b8eff;
}
button.btn-secondary {
    background-color: var(--color-bg-highlight-bg);
    color: rgba(255, 255, 255, 0.82);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
}
button.btn-secondary:hover {
    background-color: #3e4347;
}
table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    word-break: break-word;
}
table tr:not(:first-child) {
    transition: background-color 0.2s ease;
}
table tr:not(:first-child):hover {
    background-color: #ffffff17;
}
th, td {
    padding: 3px 0px;
    border-collapse: collapse;
}
th {
    font-size: 1rem;
}
td {
    border-top: 1px solid #ffffff17;
    border-spacing: 0px;
    overflow-wrap: break-word;
    font-size: 0.88rem;
    text-align: center;
}
p {
    margin: 0px;
}
a {
    color: #ffffffd1;
    text-underline-offset: 3px;
}
a[target="_blank"]::after {
    content: "↗";
}
a#menu-api[target="_blank"]::after, a#menu-donate[target="_blank"]::after {
    content: unset;
}
ul {
    margin-block-start: 0.3rem;
    margin-block-end: 0.7rem;
}


label.input {
    cursor: pointer;
}
label {
    user-select: none;
}


/* ================================================== Radio */
input[type="radio"] {
    border: 0;
    clip: rect(0 0 0 0);
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
}
input[type="radio"] + span:before {
    content: '';
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    vertical-align: -0.05em;
    border-radius: 1em;
    border: 0.25em solid var(--color-bg);
    box-shadow: 0 0 0 0.1em currentColor;
    margin-right: 0.6em;
    transition: 0.2s ease;
}
input[type="radio"]:checked + span:before {
    background: #0077ff;
    box-shadow: 0 0 0 0.1em #0077ff;
}


/* ================================================== Checkbox */
input[type="checkbox"] {
    border: 0;
    clip: rect(0 0 0 0);
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
}
input[type="checkbox"] + span::before {
    content: '';
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    vertical-align: -0.05em;
    border-radius: 0.1em;
    border: 0.25em solid var(--color-bg);
    box-shadow: 0 0 0 0.1em currentColor;
    margin-right: 0.6em;
    transition: 0.2s ease;
}
input[type="checkbox"]:checked + span:before {
    background: #0077ff;
    box-shadow: 0 0 0 0.1em #0077ff;
}











/* ================================================== Header */
#site-header {
    margin-top: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 12px;
}
#site-branding {
    flex-grow: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-bottom: 16px; */
}
#site-logo {
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
    width: 56px;
    height: 56px;
}
#site-subtitle {
    display: block;
    float: left;
    opacity: 70%;
    margin-top: -2px;
    font-size: 0.93rem;
}
#site-title-container {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

.header-menu {
    flex-grow: 1;

    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}
.header-menu a {
    cursor: pointer;
    padding: 8px 20px;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    opacity: 85%;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    background-color: var(--color-bg-indent);
}
.header-menu a:hover, #index #menu-index, #server #menu-server {
    background-color: var(--color-bg-highlight-bg);
    opacity: 100%;
}

.search-info-bar-left {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.8rem;
}
.search-info-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 20px;
    row-gap: 12px;
    align-items: center;
    padding: 0 10px;
    margin-top: 8px;
}

.stats-summary-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 16px;
    row-gap: 4px;
    font-size: 0.8rem;
}
.stats-summary-item {
    display: flex;
    gap: 8px;
    align-items: center;
}
.stats-summary-title {
    color: rgba(255, 255, 255, 0.6);
    text-align: end;
    line-height: 95%;
    font-size: 0.66rem;
}
.stats-summary-value {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
}

#header-uptime-status {
    flex-grow: 0;

    display: flex;
    flex-direction: column;
}
.uptime-status-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
}
.uptime-status-item span {
    opacity: 0.9;
}
#header-uptime-status .tooltip-text {
    left: unset;
    right: 0%;
    margin-left: unset;
}


/* ================================================== Main search area */
#main-disclosure-area {
    margin-top: 10px;
    /* display: flex; */
    /* align-items: center; */
    /* gap: 8px; */

    font-size: 0.85rem;

    padding: 10px;
    background-color: var(--color-bg-highlight);
    border-radius: 16px;
}
#search-area {
    margin-top: 12px;
}
#player_name, #server-search-box, #submit {
    font-size: 1.4rem;
    padding: 12px 20px;
}
#player_name, #server-search-box {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex-grow: 1;

    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    background-color: var(--color-bg-indent);
    color: #ffffffd1;
    outline-width: 0;
}
#submit {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}
.input-group {
    display: flex;
}




/* ================================================== Loaders */
.loader-inner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 1px; /* Stop loader clipping */
}
.loader-title {
    font-size: 1.2rem;
    font-weight: 500;
}
.loader-container {
    padding-left: 20px;
    padding-right: 20px;
}
.loader-inner-container .loader {
    flex: 0 0 2.5rem;
}
.loader {
    border: 4px solid #ffffff31;
    border-top: 4px solid #0077ff;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    -webkit-animation: spin 0.7s linear infinite; /* Safari */
    animation: spin 0.7s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




/* ================================================== Advanced section */
.advanced-section {
    padding: 0 14px;
    text-align: left;
}
.input-group-title {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}
.vertical-options {
    display: flex;
    flex-direction: column;
}
.vertical-options label.input {
    cursor: pointer;
    padding: 2px 0;
}
.advanced-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px 40px;
    font-size: 0.8rem;
    margin-top: 8px;
}
.btn-secondary {
    display: block;
    margin-top: 8px;
}
.advanced-text-faded {
    font-size: 0.8rem;
    opacity: 80%;
}




/* ================================================== Message banners */
.message-inner-container {
    margin-top: 20px;
    padding: 16px;
}
.message {
    display: block;
    font-size: 1.1rem;
}



/* ================================================== Colors */
.background-red {
    background-color: #7c2727;
}
.background-legit {
    background-color: #277c38 !important;
}
.background-sus {
    background-color: #7b6a00 !important;
}
.background-v-sus {
    background-color: #874900 !important;
}
.background-hack {
    background-color: #7c2727 !important;
}
.background-legit-highlight {
    background-color: #40d85e;
}
.background-sus-highlight {
    background-color: #d9bb00;
}
.background-v-sus-highlight {
    background-color: #f28300;
}
.background-hack-highlight {
    background-color: #df2424;
}
.color-legit {
    color: #40d85e;
}
.color-sus {
    color: #d9bb00;
}
.color-v-sus {
    color: #f28300;
}
.color-hack {
    color: #df2424;
}




/* ================================================== Expandable */
.expandable {
    height: auto;
    overflow: hidden;
    transition: height 0.3s ease;
}




/* ================================================== Containers */
.bordered {
    border: 1px solid #ffffff21;
    border-radius: 16px;
}



/* ================================================== Views */
.status-dot {
    border-radius: 50%;
    display: block;
}

.tooltip {
    position: relative;
    /* border-bottom: 1px dotted #ffffff86; */
}
.tooltip .tooltip-text {
    visibility: hidden;
    opacity: 0%;
    width: 120px;
    background-color: black;
    color: rgba(255, 255, 255, 0.82);
    text-align: center;
    font-size: 0.8rem;
    border-radius: 16px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -72px;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.6);
    transition: opacity 0.2s ease;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltip-text, .tooltip-text:hover .tooltip-text {
    visibility: visible;
    opacity: 100%;
}


.btn-medium {
    display: block;
    cursor: pointer;
    text-align: left;
    user-select: none;
    text-decoration: none;

    background-color: var(--color-bg-highlight-more);
    border-radius: 16px;
    padding: 6px 12px;
    transition: background-color 0.2s ease;
}
.btn-medium:hover {
    background-color: var(--color-bg-highlight-more-hover);
}










/* ================================================== Snackbar */
#snackbar {
    visibility: hidden;
    background-color: #ececec;
    color: #202020;
    font-weight: 500;
    border-radius: 16px;
    padding: 16px 30px;
    position: fixed;
    z-index: 1;
    top: 30px;
    right: 30px;
}
#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.3s, fadeout 0.3s 3s;
    animation: fadein 0.3s, fadeout 0.3s 3s;
}
@-webkit-keyframes fadein {
    from {right: 0; opacity: 0;}
    to {right: 30px; opacity: 1;}
}
@keyframes fadein {
    from {right: 0; opacity: 0;}
    to {right: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
    from {right: 30px; opacity: 1;}
    to {right: 0; opacity: 0;}
}
@keyframes fadeout {
    from {right: 30px; opacity: 1;}
    to {right: 0; opacity: 0;}
}




/* ================================================== Style */
.left {
    text-align: start;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.bold {
    font-weight: 500;
}

.table-item-faint {
    /* opacity: 70%; */
    color: var(--color-text-on-highlight-faint);
}





/* ================================================== Pulsing Status Indicator */
@keyframes status-indicator-pulse {
    0%   { box-shadow: 0 0 0 0 var(--status-indicator-color-semi); }
    70%  { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-transparent); }
    100% { box-shadow: 0 0 0 0 var(--status-indicator-color-transparent); }
}

@keyframes status-indicator-pulse-active {
    0%   { box-shadow: 0 0 0 0 var(--status-indicator-color-active-semi); }
    70%  { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-active-transparent); }
    100% { box-shadow: 0 0 0 0 var(--status-indicator-color-active-transparent); }
}

@keyframes status-indicator-pulse-positive {
    0%   { box-shadow: 0 0 0 0 var(--status-indicator-color-positive-semi); }
    70%  { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-positive-transparent); }
    100% { box-shadow: 0 0 0 0 var(--status-indicator-color-positive-transparent); }
}

@keyframes status-indicator-pulse-intermediary {
    0%   { box-shadow: 0 0 0 0 var(--status-indicator-color-intermediary-semi); }
    70%  { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-intermediary-transparent); }
    100% { box-shadow: 0 0 0 0 var(--status-indicator-color-intermediary-transparent); }
}

@keyframes status-indicator-pulse-negative {
    0%   { box-shadow: 0 0 0 0 var(--status-indicator-color-negative-semi); }
    70%  { box-shadow: 0 0 0 var(--status-indicator-size) var(--status-indicator-color-negative-transparent); }
    100% { box-shadow: 0 0 0 0 var(--status-indicator-color-negative-transparent); }
}

status-indicator {
    display: inline-block;
    border-radius: 50%;
    width: var(--status-indicator-size);
    height: var(--status-indicator-size);
    background-color: var(--status-indicator-color);
    margin-top: 1px;
}

status-indicator[pulse] {
    animation-name: status-indicator-pulse;
    animation-duration: var(--status-indicator-animation-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: 0;
    animation-fill-mode: none;
}

status-indicator[active] {
    background-color: var(--status-indicator-color-active);
}

status-indicator[active][pulse] {
    animation-name: status-indicator-pulse-active;
}

status-indicator[positive] {
    background-color: var(--status-indicator-color-positive);
    animation-name: status-indicator-pulse-positive;
}

status-indicator[positive][pulse] {
    animation-name: status-indicator-pulse-positive;
}

status-indicator[intermediary] {
    background-color: var(--status-indicator-color-intermediary);
}

status-indicator[intermediary][pulse] {
    animation-name: status-indicator-pulse-intermediary;
}

status-indicator[negative] {
    background-color: var(--status-indicator-color-negative);
    animation-name: status-indicator-pulse-negative;
}

status-indicator[negative][pulse] {
    animation-name: status-indicator-pulse-negative;
}






/* ================================================== Device specific */
.container {
    margin: 0 auto;
    width: 1300px;
}
@media only screen and (max-width: 1400px) {
    .container {
        width: 100%;
    }
    .container-inner {
        padding-left: 16px;
        padding-right: 16px;
    }
}
@media only screen and (max-width: 767px) {
    #site-header {
        flex-direction: column;
    }
    .container {
        width: 100%;
    }
    .container-inner {
        padding-left: 4px;
        padding-right: 4px;
    }
    #header-uptime-status {
        flex-direction: row;
        column-gap: 10px;
    }
    #player_name, #server-search-box, #submit {
        font-size: 1rem;
    }
    #site-logo {
        width: 50px;
        height: 50px;
        margin-right: 14px;
    }
    #site-title {
        font-size: 1.6rem;
    }
    .loader-container {
        text-align: left;
    }
    .search-info-bar {
        justify-content: center;
    }
    #main-disclosure-area {
        font-size: 0.8rem;
    }
}