/* version: 2.1.2 */

body {
    font-family: "Barlow Condensed", "Open Sans", "Segoe UI", "Helvetica", sans-serif;
    color: var(--primary-light-color-midtone);
    background-color: var(--primary-dark-color-midtone);
}

div.corner-panel {
    left: unset;
    right: 0;
}

div#sfx-table {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0;
}

@media (max-width: 768px) {
    div#sfx-table {
        justify-content: space-evenly;
    }
}

div.sfx-card,
div.sfx-card-free {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: flex-start;
    align-items: stretch;
    width: 13.33em;
    max-width: 45%;
    margin: .2em;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    border-radius: .5em;
    border-color: var(--primary-dark-color-shadow);
    color: var(--primary-dark-color-midtone);
    white-space: nowrap;
    font-size: .8em;
    font-weight: 300;
    text-align: center;
    vertical-align: top;
    overflow-x: clip;
}

div.sfx-card td,
div.sfx-card-free td {
    width: fit-content;
}

div.sfx-card {
    background-color: color-mix(in srgb, var(--accent-color-5-highlight) 60%, var(--overlay-light-color-double));
}

div.sfx-card-free {
    background-color: color-mix(in srgb, var(--accent-color-4-highlight) 60%, var(--overlay-light-color-double));
}

div.sfx-main-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    padding: .2em;
    font-size: 1.1em;
    text-wrap: wrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

div.sfx-main-panel > div {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

div.sfx-tags-panel,
div.sfx-alias-panel {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: stretch;
    margin: .2em 0;
}

div.sfx-icon-panel {
    display: flex;
    width: 1.8em;
    max-width: 6em;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: safe center;
    justify-content: flex-start;
    align-items: safe center;
    margin: .1em;
    padding: .1em;
    border: 1px dashed;
    border-radius: .5em;
    border-color: var(--overlay-dark-color-muted);
    background-color: var(--overlay-dark-color-muted);
    color: var(--primary-dark-color-midtone);
}

div.sfx-icon-panel > div {
    cursor: pointer;
    margin: .3em 0;
    transition: all .33s ease-out;
}

div.sfx-button-download a,
div.sfx-button-download a:hover,
div.sfx-button-download a:active {
    color: unset;
    text-decoration: unset;
}

@media (min-width: 769px) {
    div.sfx-icon-panel > div:hover {
        transform: scale(1.4);
    }
}

div.sfx-tags-panel div {
    text-wrap: wrap;
    vertical-align: middle;
}

span.sfx-tag-label {
    padding: .4em;
    margin: .2em;
    border: 1px solid black;
    border-radius: 6px;
    font-size: .9em;
    font-weight: 600;
    background-color: #587048;
    display: inline-block;
}

span.sfx-alias-label {
    padding: .1em;
    margin: .2em;
    font-size: .9em;
    font-weight: 300;
    overflow: hidden;
    text-overflow: fade;
    white-space: nowrap;
}

div.sfx-title {
    margin: .2em .2em .5em .2em;
    text-transform: uppercase;
    font-size: 1.0em;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.sfx-longtitle,
div.sfx-dateadded,
div.sfx-untruncated-quote {
    display: none;
}

div.sfx-char,
div.sfx-source {
    margin: .2em;
    font-size: .9em;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.sfx-quote,
div.sfx-description {
    height: 2.9em;
    max-height: 2.9em;
    margin: .2em;
    text-wrap-mode: wrap;
    text-wrap-style: pretty;
    font-style: italic;
    font-size: 1em;
    font-weight: 300;
    white-space: normal;
    overflow-y: hidden;
}

div.sfx-command {
    margin: .2em;
    font-size: 1.1em;
    font-weight: 500;
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div#search-panel,
div#filter-panel {
    margin: .5em;
    font-size: 1.2em;
}

div#search-panel-heading,
div.filter-panel-heading {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: safe center;
    justify-content: flex-start;
    align-items: safe center;
    margin: 0 0 .5em;
    font-size: 1.1em;
}

div.filter-panel-heading {
    margin-top: .5em;
}

div#search-panel-heading-text,
div.filter-panel-heading-text {
    margin: 0 1em 0 0;
}

div#tag-filters-container,
div#title-filters-container {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: stretch;
}

div#tag-filters-container {
    max-width: 69em;
    display: flex;
}

div#title-filters-container {
    max-width: 100em;
    display: none;
}

div#reset-filters-icon,
div#toggle-all-tags-icon,
div#toggle-all-aliases-icon,
div#toggle-tag-filters-icon,
div#toggle-title-filters-icon {
    margin: 0 .5em;
}

div#search-panel-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: safe center;
    justify-content: flex-start;
    align-items: safe center;
    padding: .1em .4em .2em .4em;
    border-width: 1px;
    border-style: solid;
    border-radius: .5em;
    border-color: var(--overlay-dark-color-double);
    color: var(--overlay-dark-color-double);
    background-color: var(--overlay-light-color-double);
    width: fit-content;
}

input#search-bar {
    width: fit-content;
    min-width: 11.33em;
    border: 0;
    background-color: transparent;
    font-family: "Barlow Condensed", "Open Sans", "Segoe UI", "Helvetica", sans-serif;
    font-size: 1.1em;
}

input#search-bar:focus {
    outline: none;
}

input#search-bar,
span#search-icon {
    display: inline-block;
}

div:has(> span#search-icon) {
    margin: .05em .5em -.05em .1em;
}

div.tag-card,
div.special-card,
div.title-card {
    cursor: pointer;
    padding: 0 .4em .25em;
    margin: .1em;
    border-width: 1px;
    border-style: solid;
    border-collapse: separate;
    border-radius: .5em;
    white-space: nowrap;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    font-size: 1.1em;
    font-weight: 500;
    font-variant: all-small-caps;
    transition: all .2s ease-out;
}

div#new-card,
div#free-card,
div#untagged-card {
    font-weight: 700;
}

div.tag-card-not-applicable {
    font-weight: 100;
    opacity: .3;
    color: var(--overlay-light-color);
    background-color: var(--overlay-dark-color-double);
    border-color: var(--overlay-light-color-muted);
    pointer-events: none;
}

div.title-card-not-applicable {
    display: none;
}

div.tag-card-neutral,
div.title-card-neutral {
    font-weight: 500;
    color: var(--overlay-dark-color-double);
    background-color: var(--overlay-light-color-double);
    border-color: var(--overlay-dark-color-double);
}

div.tag-card-active,
div.title-card-active {
    font-weight: 600;
    color: var(--primary-light-color-midtone-contrast);
    background-color: var(--primary-dark-color-bright-contrast);
    border-color: var(--overlay-light-color);
}

div.tag-card-inactive,
div.title-card-inactive {
    font-weight: 400;
    color: var(--overlay-dark-color-double);
    background-color: var(--overlay-light-color-double);
    border-color: var(--overlay-dark-color-soft);
}

@media (min-width: 769px) {
    div.tag-card:hover,
    div.special-card:hover,
    div.title-card:hover {
        cursor: pointer;
    }

    div.tag-card-neutral:hover,
    div.title-card-neutral:hover,
    div.tag-card-inactive:hover,
    div.title-card-inactive:hover {
        font-weight: 500;
        color: var(--overlay-dark-color-double);
        background-color: var(--accent-color-4-highlight);
        border-color: var(--accent-color-4-shadow);
    }

    div.tag-card-active:hover,
    div.title-card-active:hover {
        font-style: italic;
        font-weight: 500;
        text-decoration: line-through;
        color: var(--accent-color-1-shadow);
        background-color: var(--accent-color-1-highlight);
        border-color: var(--overlay-dark-color-soft);
    }
}

div.tag-label::before,
div.title-label::before {
    content: attr(data-content);
}

div.tag-label::after,
div.title-label::after {
    content: attr(data-content);
    display: block;
    font-weight: bold;
    font-style: normal;
    height: 0;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}

div.sfx-icon-panel {
    width: 2em;
    vertical-align: top;
    text-align: left;
}

div#toggle-tag-filters-icon,
div#toggle-title-filters-icon,
div#toggle-all-tags-icon,
div#toggle-all-aliases-icon,
div#reset-filters-icon {
    cursor: pointer;
    color: var(--overlay-light-color);
    transition: all .33s ease-out;
}

@media (min-width: 769px) {
    div#toggle-tag-filters-icon:hover,
    div#toggle-title-filters-icon:hover,
    div#toggle-all-tags-icon:hover,
    div#toggle-all-aliases-icon:hover,
    div#reset-filters-icon:hover,
    div.sfx-icon-panel td:hover {
        transform: scale(1.7);
        color: var(--primary-light-color-midtone-contrast);
    }
}

div#sfx-panel {
    margin-top: 1em;
}