/* version: 1.3.0 */

body {
    font-family: "Open Sans", "Segoe UI", "Helvetica", sans-serif;
}

table#sfx-table {
    margin: 0;
    display: block;
    border-collapse: separate;
}

tr.sfx-card,
tr.sfx-card-free {
    margin: .2em;
    padding: 0;
    border: 1px solid black;
    border-collapse: separate;
    border-radius: .5em;
    white-space: nowrap;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    font-size: .8em;
    font-weight: 300;
}

tr.sfx-card {
    background-color: #c8e8d8;
    border-color: #102810;
    color: #002050;
}

tr.sfx-card-free {
    background-color: #e8d8c8;
    border-color: #281028;
    color: #500020;
}

td.sfx-main-panel {
    width: 10em;
    max-width: 14em;
    text-wrap: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

td.sfx-tags-panel,
div.sfx-alias-panel {
    vertical-align: middle;
    display: none;
}

td.sfx-icon-panel,
td.sfx-tags-panel {
    width: 1.8em;
    max-width: 6em;
    margin: .1em;
    padding: .1em;
    border: 1px dashed;
    border-radius: .5em;
    text-align: center;
    vertical-align: top;
    border-color: #000000d8;
    background-color: #00000020;
    color: #000000b0;
}

td.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;
    color: #f0f0d8;
    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;
    color: #205000;
    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;
    color: #205000;
    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: balance;
    font-style: italic;
    font-size: 1em;
    font-weight: 300;
    overflow: clip;
    color: #205000;
}

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

tr.sfx-card-free div.sfx-title,
tr.sfx-card-free div.sfx-char,
tr.sfx-card-free div.sfx-source,
tr.sfx-card-free div.sfx-quote,
tr.sfx-card-free div.sfx-description,
tr.sfx-card-free div.sfx-command {
    color: #502000;
}

div#search-panel,
div#tag-filters-container,
div#title-filters-container {
    margin-bottom: .5em;
    vertical-align: middle;
}

div#search-panel,
div#tag-filters-container {
    display: block;
}

div#title-filters-container {
    display: none;
}

div#search-panel {
    margin-left: 1.1em;
}

div#tag-filters-container,
div#title-filters-container {
    margin: 0 0 1em .85em;
}

div#search-panel {
    padding: .1em .4em .2em .4em;
    border: 1px solid black;
    border-radius: .5em;
    background-color: #f0f0f0;
    width: fit-content;
}

input#search-bar {
    border: 0px;
    width: fit-content;
    min-width: 5em;
    background-color: inherit;
}

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

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

span#search-icon {
    color: #b0b0b0;
    margin-right: .6em;
}

tr.tag-card,
tr.special-card,
tr.title-card {
    margin: .1em .2em .2em .1em;
    padding: 0 0.3em 0.1em 0.3em;
    border: 1px solid black;
    border-collapse: separate;
    border-radius: .5em;
    white-space: nowrap;
    vertical-align: top;
    text-align: center;
    display: inline-block;
    font-size: 1em;
    font-weight: 400;
    font-variant: all-small-caps;
}

tr.tag-card-not-applicable {
    background-color: #c0c0c0;
    border-color: #606060;
    color: #383838;
    font-weight: 100;
    opacity: .3;
    pointer-events: none;
}

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

tr.tag-card-neutral,
tr.title-card-neutral {
    background-color: #e0d8b0;
    border-color: #302000;
    color: #503020;
    font-weight: 400;
}

tr.tag-card-active,
tr.title-card-active {
    background-color: #205000;
    border-color: #90c890;
    color: #c0e0b0;
    font-weight: 600;
}

tr.tag-card-inactive,
tr.title-card-inactive {
    background-color: #c0c0c0;
    border-color: #606060;
    color: #383838;
    font-weight: 100;
}

tr.tag-card:hover,
tr.special-card:hover,
tr.title-card:hover {
    cursor: pointer;
}

tr.tag-card-neutral:hover,
tr.title-card-neutral:hover,
tr.tag-card-inactive:hover,
tr.title-card-inactive:hover {
    background-color: #b0e0c0;
    border-color: #206048;
    color: #005020;
    font-weight: 500;
}

tr.tag-card-active:hover,
tr.title-card-active:hover {
    background-color: #502000;
    border-color: #c89090;
    color: #e0c0b0;
    font-style: italic;
    font-weight: 200;
    text-decoration: line-through;
}

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

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

div.search-heading,
div.filter-heading,
div.search-heading div,
div.filter-heading div {
    height: 2.2em;
    vertical-align: top;
}

div.search-heading div,
div.filter-heading div {
    padding: 0;
    margin: .2em .2em .2em 1.1em;
    font-weight: 500;
    display: inline-block;
    position: relative;
}

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

td.sfx-icon-panel tr,
td.sfx-icon-panel td,
div#toggle-tag-filters-icon,
div#toggle-title-filters-icon,
div#toggle-all-tags-icon,
div#toggle-all-aliases-icon,
div#reset-filters-icon {
    width: 1.4em;
    height: 1.5em;
    text-align: center;
    vertical-align: middle;
}

div#toggle-tag-filters-icon,
div#toggle-title-filters-icon,
div#toggle-all-tags-icon,
div#toggle-all-aliases-icon,
div#reset-filters-icon {
    display: inline-block;
}

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,
td.sfx-icon-panel td:hover {
    font-size: 1.3em;
    color: #b04018;
}

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