:root {
    --bans-color: #f14668;
    --voice-color: #3273dc;
    --text-color: #b19cd9;
    --admin-chat-color: #48c774;
    --call-admin-color: #ffdd57;
    --item-color: #a600ff;
    --warning-color: orange;

    /* light mode color scheme */
    --light-background-accent-primary: #3273dc;
    --light-background-accent-secondary: #2366d1;
    --light-background-primary: #fff;
    --light-background-secondary: whitesmoke;
    --light-background-tertiary: hsl(0, 0%, 90%);
    --light-text-primary: #363636;
    --light-text-secondary: #363636;
    --light-text-placeholder: #a0a0a0;
    --light-link: #3273dc;
    --light-link-hover: #2259b2;

    /* dark mode color scheme */
    --dark-background-accent-primary: #105edb;
    --dark-background-accent-secondary: #0d50bb;
    --dark-background-primary: rgb(20, 20, 20);
    --dark-background-secondary: #242424;
    --dark-background-tertiary: hsl(0, 0%, 25%);
    --dark-text-primary: #f5f5f5;
    --dark-text-secondary: #dbdbdb;
    --dark-text-placeholder: #a0a0a0;
    --dark-link: #4c82d8;
    --dark-link-hover: #3060ad;

    /* default to light mode if no media query for prefers-color-scheme: dark */
    --background-accent-primary: var(--light-background-accent-primary);
    --background-accent-secondary: var(--light-background-accent-secondary);
    --background-primary: var(--light-background-primary);
    --background-secondary: var(--light-background-secondary);
    --background-tertiary: var(--light-background-tertiary);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-placeholder: var(--light-text-placeholder);
    --link: var(--light-link);
    --link-hover: var(--light-link-hover);
}

.theme-opposite {
    --background-accent-primary: var(--dark-background-accent-primary);
    --background-accent-secondary: var(--dark-background-accent-secondary);
    --background-primary: var(--dark-background-primary);
    --background-secondary: var(--dark-background-secondary);
    --background-tertiary: var(--dark-background-tertiary);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-placeholder: var(--dark-text-placeholder);
    --link: var(--dark-link);
    --link-hover: var(--dark-link-hover);
}

#dark-mode-toggle i:before {
    content: "\f186";
}

#dark-mode-toggle[data-modeset="opposite"] i:before {
    content: "\f185";
}

#server_map {
    filter: invert();
}

.theme-opposite #server_map {
    filter: none;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-accent-primary: var(--dark-background-accent-primary);
        --background-accent-secondary: var(--dark-background-accent-secondary);
        --background-primary: var(--dark-background-primary);
        --background-secondary: var(--dark-background-secondary);
        --background-tertiary: var(--dark-background-tertiary);
        --text-primary: var(--dark-text-primary);
        --text-secondary: var(--dark-text-secondary);
        --text-placeholder: var(--dark-text-placeholder);
        --link: var(--dark-link);
        --link-hover: var(--dark-link-hover);
    }

    .theme-opposite {
        --background-accent-primary: var(--light-background-accent-primary);
        --background-accent-secondary: var(--light-background-accent-secondary);
        --background-primary: var(--light-background-primary);
        --background-secondary: var(--light-background-secondary);
        --background-tertiary: var(--light-background-tertiary);
        --text-primary: var(--light-text-primary);
        --text-secondary: var(--light-text-secondary);
        --text-placeholder: var(--light-text-placeholder);
        --link: var(--light-link);
        --link-hover: var(--light-link-hover);
    }

    #dark-mode-toggle i:before {
        content: "\f185";
    }

    #dark-mode-toggle[data-modeset="opposite"] i:before {
        content: "\f186";
    }

    .theme-opposite #server_map {
        filter: invert();
    }

    #server_map {
        filter: none;
    }
}

.is-accent {
    background-color: var(--background-accent-primary);
    color: #fff;
}

.background-primary {
    background-color: var(--background-primary);
}

.background-secondary {
    background-color: var(--background-secondary);
}

.background-tertiary {
    background-color: var(--background-tertiary);
}

.text-primary,
.text-primary:hover {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-link {
    color: var(--link);
}

.user-avatar {
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: middle;
}

.nav-icon {
    margin-right: 5px;
}

@media screen and (max-width: 1024px) {
    .nav-icon-mobile {
        margin-right: 5px;
    }
}

@media screen and (min-width: 1024px) {
    .search {
        min-width: 200px;
    }
}

#globalFooter {
    opacity: 0.8;
    text-align: center;
    font-size: 8pt;
}

.has-background-total {
    background-color: rgb(0, 200, 200);
}

.is-white-shadow-text {
    color: white;
    text-shadow: 1px 1px 4px #0a0a0a;
}

.stat-card {
    font-size: 2em;
}


/* Loading animations */
@keyframes loading {
    0% {
        opacity: 100%;
    }

    100% {
        opacity: 80%;
    }
}

.card.is-loading {
    animation-name: loading;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease;
}

/* Fix Quick Links Colors */
.panel-block.has-text-light {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.panel-block.has-text-light:hover {
    background-color: #121212;
}

.gt-image {
    width: 75%;
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
}

.gt-image-inner {
    border-radius: 4px;
}

.fb-server {
    margin-left: auto;
    margin-right: auto;
}

.fb-container {
    width: 100%;
}

.is-size-largest {
    font-size: 4em;
}

.tile-hoverable {
    cursor: pointer;
}

.tile-hoverable.has-background-danger {
    background-color: rgba(241, 70, 104, 1) !important;
    transition: 0.3s;
}

.tile-hoverable.has-background-danger:hover {
    background-color: rgba(242, 88, 119, 1) !important;
}

.is-current.has-background-danger {
    border-color: rgb(241, 70, 104) !important;
}

.tile.server-card {
    min-height: 350px;
}

.tile.server-card.is-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nowrap {
    white-space: nowrap;
    overflow: hidden;
}

.img-mod-icon-sc {
    display: inline;
}

.img-mod-icon {
    vertical-align: -.0900em;
    width: auto;
    height: 1.333em;
    line-height: .75em;

}

.server-icon-child {
    margin-top: 3px;
}

.server-icons {
    writing-mode: vertical-lr;
    text-orientation: upright;
    position: relative;
    margin-right: -1em;
    margin-left: auto;
}

@media screen and (min-width: 768px) {
    .server-icons {
        margin-bottom: -4.8em
    }
}

@media screen and (max-width: 768px) {
    .server-icons {
        margin-bottom: -4em
    }
}

.half-screen {
    width: 50%;
}

.user-avatar-table {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 5px;
}

.vertical-center {
    vertical-align: middle !important;
}

.is-borderless > tr > td,
th {
    border: none !important;
}

.w-100px {
    width: 110px;
}

.w-50px {
    width: 60px;
}

.player-box {
    max-height: 600px;
    overflow-y: hidden;
    border-radius: 5px;
}

.infraction-details {
    border-radius: 5px;
}

.infraction-details-c {
    max-height: 450px;
    overflow-y: auto;
}

.infraction-details tr > td:first-child {
    width: 100px;
    display: block;
    box-sizing: content-box;
}

.table-controls {
    height: 32px;
}

.server-table {
    overflow-y: auto !important;
    overflow-x: hidden;
    display: block;
    max-height: 500px;
    min-height: 200px;
}

.inf-view-tab {
    overflow-y: auto !important;
    overflow-x: hidden;
    display: block;
    max-height: 500px;
    min-height: 200px;
}

.table-player-ditem {
    width: calc(32em - 110px);
}

.table-player-ditem2 {
    width: calc(32em - 60px);
}

.crop-to-container.server-map-image > img {
    object-fit: cover;
    width: 64px;
    height: 64px;
    object-position: center;
}

.no-bottom-border {
    border: none !important;
}

.index-search {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.infraction-row {
    height: 64px;
    cursor: pointer;
    transition: 0.1s;
}

.max-50 {
    max-width: 50px;
}

.max-200 {
    max-width: 200px;
}

.max-250 {
    max-width: 250px;
}

.min-200 {
    min-width: 200px;
}

.fa24 {
    font-size: 1.5em;
}

.infraction-user-av {
    width: 42px;
    height: 42px;
    vertical-align: middle;
    border-radius: 50%;
}

@media screen and (max-width: 475px) {
    .is-hidden-mobile-tiny {
        display: none !important;
    }
}

.is-ban {
    color: var(--bans-color);
}

.is-voice {
    color: var(--voice-color);
}

.is-text {
    color: var(--text-color);
}

.is-admin-chat {
    color: var(--admin-chat-color)
}

.is-call-admin {
    color: var(--call-admin-color);
}

.is-item {
    color: var(--item-color);
}

.is-warning {
    color: var(--warning-color);
}

.has-background-ban,
.has-background-voice,
.has-background-text,
.has-background-warning,
.has-background-calladmin,
.has-background-adminchat,
.has-background-item,
.has-background.adminchat {
    color: white !important;
}

.has-background-ban {
    background-color: var(--bans-color) !important;
}

.has-background-voice {
    background-color: var(--voice-color) !important;
}

.has-background-text {
    background-color: var(--text-color) !important;
}

.has-background-warning {
    background-color: var(--warning-color) !important;
}

.has-background-calladmin {
    background-color: var(--call-admin-color) !important;
}

.has-background-adminchat {
    background-color: var(--admin-chat-color) !important;
}

.has-background-item {
    background-color: var(--item-color) !important;
}

.has-background.adminchat {
    background-color: var(--bans-color) !important;
}

.has-text-orange {
    color: var(--warning-color);
}

.infractions-table.has-background-darkm > thead > tr > th {
    border-bottom-color: rgba(169, 169, 169, 0.3);
}

.infractions-table.has-background-darkm > tbody > tr > td {
    border-bottom-color: rgba(169, 169, 169, 0);
}

.has-background-darkm {
    background: rgb(20, 20, 20) !important;
}

.nf-icon {
    font-size: 10em !important;
    opacity: 0.5;
}

.modal-card-head.has-background-black-ter {
    border-bottom: none !important;
}

.modal-card-foot.has-background-black-ter {
    border-top: none !important;
}

.modal-card-foot {
    flex-direction: row-reverse;
}

.modal-card-foot > button:nth-child(1 of :not(.is-hidden)) {
    margin-left: 5px;
    margin-right: 0 !important;
}

.modal-card-foot > button:nth-last-child(1 of :not(.is-hidden)) {
    left: 20px;
    position: absolute;
}

.select-exp {
    width: 600px;
}

.has-light-hover:hover {
    color: white;
}

.button.is-text-btn,
.button.is-text-btn:hover {
    background-color: var(--text-color);
    border-color: transparent;
    color: #fff;
}

.button.is-text-btn.is-outlined,
.button.is-text-btn.is-outlined:hover {
    background-color: transparent;
    border-color: var(--text-color);
    color: var(--text-color);
}


.button.is-call-admin-btn.is-outlined,
.button.is-call-admin-btn.is-outlined:hover {
    background-color: transparent;
    border-color: var(--call-admin-color);
    color: var(--call-admin-color);
}

.button.is-call-admin-btn,
.button.is-call-admin-btn:hover {
    background-color: var(--call-admin-color);
    border-color: #fad339;
    color: #fff;
}

.button.is-admin-chat-btn,
.button.is-admin-chat-btn:hover {
    background-color: var(--admin-chat-color);
    border-color: transparent;
    color: #fff;
}

.button.is-admin-chat-btn.is-outlined,
.button.is-admin-chat-btn.is-outlined:hover {
    background-color: transparent;
    border-color: var(--admin-chat-color);
    color: var(--admin-chat-color);
}

.button.is-item-btn,
.button.is-item-btn:hover {
    background-color: var(--item-color);
    border-color: transparent;
    color: #fff;
}

.button.is-item-btn.is-outlined,
.button.is-item-btn.is-outlined:hover {
    background-color: transparent;
    border-color: var(--item-color);
    color: var(--item-color);
}

.button.is-ban-btn,
.button.is-ban-btn:hover {
    background-color: var(--bans-color);
    border-color: transparent;
    color: #fff;
}

.button.is-ban-btn.is-outlined,
.button.is-ban-btn.is-outlined:hover {
    background-color: transparent;
    border-color: var(--bans-color);
    color: var(--bans-color);
}

.button.is-voice-btn,
.button.is-voice-btn:hover {
    background-color: var(--voice-color);
    border-color: transparent;
    color: #fff;
}

.button.is-voice-btn.is-outlined,
.button.is-voice-btn.is-outlined:hover {
    background-color: transparent;
    border-color: var(--voice-color);
    color: var(--voice-color);
}

.button.is-warning-btn,
.button.is-warning-btn:hover {
    background-color: var(--warning-color);
    border-color: transparent;
    color: #fff;
}

.button.is-warning-btn.is-outlined,
.button.is-warning-btn.is-outlined:hover {
    background-color: transparent;
    border-color: var(--warning-color);
    color: var(--warning-color);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    appearance: textfield;
}

.card-rounded {
    border-radius: 5px;
}

table.has-background-darkm > tbody > tr.infraction-row:hover {
    background: hsl(0, 0%, 15%);
}

table.has-background-white > tbody > tr.infraction-row:hover {
    background: hsl(0, 0%, 90%);
}

.edit {
    opacity: 0.6;
}

@font-face {
    font-family: "gflbansTitle";
    src: url("/static/3rdparty/webfonts/Montserrat-Bold.ttf");
}

.ab-title {
    font-family: 'gflbansTitle', sans-serif;
    font-weight: 500;
}

img {
    /* Beta innit */
    image-rendering: smooth;
}

.mw-100 {
    width: 100%;
}

#commentState {
    position: relative;
}

#commentState.fa-sort-up {
    top: 3.5px;
}

#commentState.fa-sort-down {
    top: -2px;
}

.click {
    cursor: pointer;
}

#iComments,
.wrappable {
    word-wrap: anywhere;
}

#iComments > .media .edit-comment {
    visibility: hidden;
}

#iComments > .media:hover .edit-comment {
    visibility: visible;
}

#deleteCommentModal .modal-card-body {
    padding-bottom: 0;
}

#loadMessage {
    color: whitesmoke;
    text-shadow: 1px 1px black;
    z-index: 1000;
}

.sk-cube-grid {
    z-index: 1000;
}

#loadingModal {
    z-index: 500;
}

.animated {
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

.loader-emote {
    max-width: 32px;
    max-height: 32px;
}

.half-opacity {
    opacity: 50%;
}

#restrictionsCancel {
    opacity: 0.6;
}

#user_name {
    margin-right: 2px;
}

#login {
    padding: 0;
    margin: 0.5rem 0.75rem;
    width: fit-content;
    height: fit-content;
}

#login > img {
    max-height: none;
}

.button.is-accent:not(.is-outlined),
#deleteCommentModal .button,
#removeModal .button {
    border-color: transparent;
}

.edit-comment-text {
    width: 100%;
    max-width: 100%;
}

.edit-comment-div .button {
    margin: 5px 0 0 5px;
    float: right;
}

#doFileUpload:hover {
    cursor: pointer;
}

.control .button {
    border-color: transparent;
}

#editTimePerm {
    border-right-color: var(--background-tertiary);
}

#editTimeUnitSelect {
    border-left-color: transparent;
}

.control .button.is-light {
    background-color: var(--background-primary);
    color: var(--text-primary);
}

#editTimePerm.is-light[disabled="disabled"]:hover {
    color: var(--text-primary);
}

#editTimeTimeDec.is-light:hover:not([disabled="disabled"]) {
    color: var(--background-accent-secondary)
}

.is-accent .panel-block:hover {
    background-color: var(--background-accent-secondary);
}

#timeValue[data-tooltip]::before {
    transform: translateY(-65%);
    left: auto;
    right: auto;
}

/* MARK: Advanced Search */
#advancedSearchToggle {
    position: absolute;
    left: 50vw;
    top: 75px;
    transform: translateX(-50%);
}

#infraction-pages {
    height: 48px;
}

#advancedSearchBlock {
    padding: 1rem;
    width: 640px !important;
    margin: auto;
    border: 1px solid var(--background-tertiary);
    border-radius: 1rem;
}

@media screen and (min-width: 1024px) {
    .search {
        width: 60%;
    }
}

#advancedSearchBlock form {
    margin: 0 1rem;
}

#advancedSearchBlock .field {
    align-items: center;
}

#advancedSearchBlock .field > label {
    flex-shrink: 0;
    padding-right: 10px;
}

#search-user-info > input:first-child {
    width: 50%;
    flex: none;
}

.time-radio-button {
    display: block;
}

.time-field > .has-addons > .control:first-child select {
    width: 100px;
}

#search-time-duration-field > .has-addons > .control:nth-child(2),
#search-time-timeleft-field > .has-addons > .control:nth-child(2) {
    width: 253px;
}

#search-time-duration-field {
    margin-top: 0.75rem;
}

.time-field {
    display: flex;
    position: relative;
    line-height: 40px;
    height: 40px;
}

.time-field label {
    width: 112px;
    text-align: right;
}

.time-field > .has-addons {
    padding-left: 5px;
}

#search-time-date-creation,
#search-time-date-expiration {
    position: absolute;
    flex: 1;
    --indent-amount: 215px;
    left: var(--indent-amount);
    width: calc(100% - var(--indent-amount));
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#advanced-search-modal h2 {
    font-weight: bold;
}

.search-area {
    border-left: 2px solid var(--background-tertiary);
    border-bottom-left-radius: 10px;
    padding-left: 20px;
    padding-top: 5px;
}

.search-area:not(:last-child) {
    margin-bottom: 10px;
}