.buttons {
    color: #ffffff;
    display: inline-block;
}
.button sl-icon-button::part(base):active,
.button sl-icon-button::part(base):focus,
.button sl-icon-button::part(base):hover{
    color: #ffffff;
}
#filtermaps_dropdown::part(base) {
    background-color: #33302e;
    margin-bottom: 10px;
}
#filtermaps_dropdown::part(base):hover {
    background: #33302e;
}

/*map list elements*/
td, th {
    border-bottom: 1px solid rgba(0,0,0,.125);
    font-size: 14px;
}
th {
    text-align: left;
}
.custom_table th, .custom_table td {
    padding: 12px;
}
tr {
    height: 55px;
}
.card-header::part(body) {
    padding: 0px 0px 0px 0px;
}
.map-header-buttons {
    font-size: 2em;
}
.map-header-buttons .buttons::part(base):hover {
    color: var(--bg-body);
}
.card-header {
    width: 100%;
}
.custom_table {
    border-collapse: collapse;
    color: white;

    width: 100%;
}
.map-header {
    display: inline-flex;
    align-items: center;
    padding: 12px 0;
}
.map-header-buttons {
    float: right;
}
.hostbuttons {
    display: none;
}
.map {
    text-align: left;
    display: inline-block;
}

/*links*/
a {
    text-decoration: none;
    color: rgb(255, 239, 181);
}
a:hover {
	text-decoration: underline;
}
a, sl-icon-button {
    text-decoration: none;
    color: rgb(255, 239, 181);
}
a:hover, sl-icon-button {
	text-decoration: underline;
}

/* active servers */
.activeserverstable {
    width: 100%;
}

.activeserverstable td {
    text-align: left;
    padding: 0px 0px 0px 10px;
    font-size: 20px;
}

#tobeplayed td:nth-child(3) {
    white-space: normal;
}
.next {
    background-color: #f9f963;
    color: black;
    border-radius: 5px;
    padding: 5px;
}
.played {
    color: #a8a8a8;
}
.played-row {
    /*display: none !important;*/
}
.eu, .present.eu {
  background-color: #0606db91;
}
.us, .present.us {
  background-color: #ffbf00c2;
}
.noplay, .noplay.eu, .noplay.us {
    background-color: #ce4545;
}
.toggle.present, .noplay.present {
    background-color: #005500; 
}
.noplay.present.eu {
    background-color: #0606db91;
}
.noplay.present.us {
    background-color: #ffbf00c2;
}

tr:has(> .noplay:not(.present)) {
    display: none !important;
}

/* ================ Narrower Windows & Mobile  ================ */

.map-url, .username, .notes {
    white-space:normal;
    overflow-wrap: anywhere;
}
.col-wide {
    width: fit-content;
}


/*Normal Size*/
@media (min-width: 751px) {
    #header-map-queue {
        min-width: 250px;
    }
    #header-map-played {
        min-width: 250px;
    }


    #header-added-queue {
        min-width: 100px;
    }
    #header-added-played {
        min-width: 100px;
    }
    #header-played {
        min-width: 100px;
    }

    .header-added-time {
        min-width: 100px;
    }

    .header-played-timestamp {
        min-width: 100px;
    }

}

/*Narrow*/
@media (max-width: 750px) {

    td, td * {
        font-size: 0.8em !important;
    }


    #header-map-queue {
        min-width: 100px;
    }
    #header-map-played {
        min-width: 75px;
    }
}

/* ================ Lower list entry de-prioritization ================
    Meant to de-emphasize maps lower on the list (e.g. N > 20) for hosts visually
*/

#tobeplayed .queued-hostmode:nth-child(22 of tr:not(.hidden, .played-row)) {
    border-top: 3px dashed;
    border-color: var(--brand-primary);
    position: relative;
    top: 0.75em;
    padding-bottom: 1em !important;
}

#tobeplayed .queued-hostmode:nth-child(n + 22 of tr:not(.hidden, .played-row)) td * {
    opacity: 0.4;
}

#tobeplayed .queued-hostmode:nth-child(22 of tr:not(.hidden, .played-row)) > td:first-child::before {
    content: "Please prioritize maps above this line!";

    color: var(--brand-primary) !important;
    top: -0.5em;
    position: absolute;
    text-transform: uppercase;
    text-align: center;
}

/* ========================== Online Presence ============================== */

@keyframes pulsate-background {
    0%, 100% {
      background-color: #118811;
    }
    50% {
      background-color: #005500;
    }
  }
  @keyframes pulsate-text-subtle {
    0%, 100% {
      color: #6c757d;
    }
    50% {
      color: #333;
    }
  }
.online-pulsating {
    animation: pulsate-background 4s infinite;
  }
.online-pulsating-subtle {
    animation: pulsate-text-subtle 4s infinite;
}

.offline {
    color: #6c757d;
}

/* ========================== List Icons ============================== */
.list-icon {
    font-size: 32px !important;
    height: 32px !important;
}
.list-icon.online-pulsating-subtle {
    /*color: #6c757d !important;*/
    animation: pulsate-text-subtle 4s infinite;
}

.flag-icon {
    border: 2px solid #fff; border-radius: 5px;
}