:root, ::before, ::after, ::selection {
--css3-only-visible: visible;
--screen-min: 1000;
--screen-max: 3600;
--font-min: 12;
--font-max: 24;
--border-min: 1;
--border-max: 2;
--border-width: clamp(1px * var(--border-min), (var(--border-max) - var(--border-min)) * (100vw - 1px * var(--screen-max) + 1px) + 1px * var(--border-min), 1px * var(--border-max));
--background-color: White;
--color: Black;

--menu-color: var(--color);
--menu-color-hover: var(--menu-color);
--menu-color-active: var(--menu-color);
--menu-color-active-hover: var(--menu-color);
--menu-border-color: Gray;
--menu-background-color: var(--background-color);
--menu-background-color-hover: #F0F0F0;
--menu-background-color-active: #E0E0E0;
--menu-background-color-active-hover: #D0D0D0;

--filter-selected-border-color: var(--menu-border-color);
--filter-selected-background-color: var(--menu-background-color);
--filter-selected-background-color-hover: var(--menu-background-color-hover);

--filter-border-color: var(--menu-border-color);
--filter-background-color: rgba(0, 240, 0, 0.05);
--filter-background-color-focus: rgba(0, 240, 0, 0.15);
--filter-background-color-disabled: rgba(240, 0, 0, 0.05);

--button-color: var(--menu-color);
--button-color-hover: var(--menu-color-hover);
--button-color-active: var(--menu-color-active);
--button-color-active-hover: var(--menu-color-active-hover);
--button-border-color: var(--menu-border-color);
--button-background-color: var(--menu-background-color);
--button-background-color-hover: var(--menu-background-color-hover);
--button-background-color-active: var(--menu-background-color-active);
--button-background-color-active-hover: var(--menu-background-color-active-hover);

--help-button-color: White;
--help-button-background-color: #5F4FEF;
--help-button-background-color-hover: #6757F7;
--help-button-background-color-active: #5747E7;



--table-border-color-bold: var(--color);
--table-border-color-thin: Silver;
--table-background-color: var(--background-color);
--table-background-color-sorted: #F7F7F7;
--table-background-color-hover: #EFEFEF;
--table-color: var(--color);
--table-color-hover: var(--color);
--table-shadow: rgba(0, 0, 0, 0.5);
--table-shadow-hover: var(--table-shadow);

/* Light */
--table-color-selected-neutral: var(--color);
--table-color-selected-neutral-hover: var(--color);
--table-background-color-selected-neutral: #CFCFCF;
--table-background-color-selected-neutral-hover: #BFBFBF;
--table-shadow-selected-neutral: var(--table-shadow);
--table-shadow-selected-neutral-hover: var(--table-shadow-selected-neutral);

/* Blue */
--table-color-selected-ctrl: var(--color);
--table-color-selected-ctrl-hover: var(--color);
--table-background-color-selected-ctrl: #BFCFFF;
--table-background-color-selected-ctrl-hover: #AFBFDF;
--table-shadow-selected-ctrl: var(--table-shadow);
--table-shadow-selected-ctrl-hover: var(--table-shadow-selected-ctrl);

/* Red */
--table-color-selected-alt: var(--color);
--table-color-selected-alt-hover: var(--color);
--table-background-color-selected-alt: #FFBFCF;
--table-background-color-selected-alt-hover: #DFAFBF;
--table-shadow-selected-alt: var(--table-shadow);
--table-shadow-selected-alt-hover: var(--table-shadow-selected-alt);

/* Yellow */
--table-color-selected-shift: var(--color);
--table-color-selected-shift-hover: var(--color);
--table-background-color-selected-shift: #FFFFCF;
--table-background-color-selected-shift-hover: #DFDFBF;
--table-shadow-selected-shift: var(--table-shadow);
--table-shadow-selected-shift-hover: var(--table-shadow-selected-shift);

/* Purple */
--table-color-selected-ctrlalt: var(--color);
--table-color-selected-ctrlalt-hover: var(--color);
--table-background-color-selected-ctrlalt: #DFCFFF;
--table-background-color-selected-ctrlalt-hover: #CFBFDF;
--table-shadow-selected-ctrlalt: var(--table-shadow);
--table-shadow-selected-ctrlalt-hover: var(--table-shadow-selected-ctrlalt);

/* Green */
--table-color-selected-ctrlshift: var(--color);
--table-color-selected-ctrlshift-hover: var(--color);
--table-background-color-selected-ctrlshift: #CFFFCF;
--table-background-color-selected-ctrlshift-hover: #BFDFBF;
--table-shadow-selected-ctrlshift: var(--table-shadow);
--table-shadow-selected-ctrlshift-hover: var(--table-shadow-selected-ctrlshift);

/* Orange */
--table-color-selected-altshift: var(--color);
--table-color-selected-altshift-hover: var(--color);
--table-background-color-selected-altshift: #FFDFBF;
--table-background-color-selected-altshift-hover: #DFCFAF;
--table-shadow-selected-altshift: var(--table-shadow);
--table-shadow-selected-altshift-hover: var(--table-shadow-selected-altshift);

/* Inverted */
--table-color-selected-ctrlaltshift: White;
--table-color-selected-ctrlaltshift-hover: White;
--table-background-color-selected-ctrlaltshift: #4F4F4F;
--table-background-color-selected-ctrlaltshift-hover: #3F3F3F;
--table-shadow-selected-ctrlaltshift: rgba(255, 255, 255, 0.5);
--table-shadow-selected-ctrlaltshift-hover: var(--table-shadow-selected-ctrlaltshift);



--themes-border-color: var(--menu-border-color);
--themes-background-color: var(--menu-background-color);
--themes-background-color-active: var(--menu-background-color-active);
--themes-background-color-hover: var(--menu-background-color-hover);
--themes-background-color-active-hover: var(--menu-background-color-active-hover);
--themes-color: var(--color);

--tooltipbox-border-color: rgba(0, 0, 0, 0.2);
--tooltipbox-background-color:  rgba(0, 0, 0, 0.1);
--tooltipbox-ctrlaltshift-border-color: rgba(255, 255, 255, 0.2);
--tooltipbox-ctrlaltshift-background-color: rgba(255, 255, 255, 0.1);
--tooltip-outline-color: rgba(0, 0, 0, 0.9);
--tooltip-border-color: rgba(32, 0, 64, 0.9);
--tooltip-background-color: rgba(0, 0, 0, 0.9);
--tooltip-color: White;
--tooltip-color-mod: #5555FF;
--tooltip-color-mod-shadow: #15153F;
}

/* BASIC */
:focus-visible {
outline: none;
}
::selection {
background-color: Maroon;
color: White;
}
* {
box-sizing: content-box;
}
html {
width: 100%;
height: 100%;
padding: 0;
font-size: clamp(1px * var(--font-min), (var(--font-max) - var(--font-min)) * (100vw - 1px * var(--screen-min)) / (var(--screen-max) - var(--screen-min)) + 1px * var(--font-min), 1px * var(--font-max));
}
html, body {
margin: 0;
}
body {
width: calc(100% - 1rem);
height: calc(100% - 1rem);
padding: 0.5rem;
background-color: White;
background-color: var(--background-color);
font-family: sans-serif;
color: Black;
color: var(--color);
}
a img {
border-width: 0;
}
input {
font-size: inherit;
}
header {
min-height: 2rem;
}
h1, #tables_list_div, #filter_selected_div, #filter_div, #deselect_all_rows_div, #help_div {
float: left;
display: block;
min-height: calc(2rem + 2 * var(--border-width));
margin: 0 3rem 0.5rem 0;
}

/* LANGUAGES */
#langs {
position: absolute;
top: 0;
right: 0;
}
#langs > * {
display: inline-block;
width: 3rem;
height: 2rem;
margin: 0.5rem 0.5rem 0 0;
}
#langs img {
width: 100%;
height: 100%;
opacity: 0.5;
object-fit: contain;
transition: all 0.2s;
}
#langs span img, #langs a:hover img {
opacity: 1;
}
#langs *:hover {
background-color: rgba(0, 0, 0, 0.04);
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
}

/* MODPACKS MENU */
#tables_menu {
position: relative;
display: inline-block;
padding: 0.25rem 0.5rem;
border: var(--border-width) outset Gray;
border-color: var(--menu-border-color);
border-radius: 0.5rem;
background-color: White;
background-color: var(--menu-background-color);
cursor: pointer;
transition: border-radius 0.05s linear 0.2s;
}
#tables_menu:hover {
border-radius: 0.5rem 0.5rem 0 0;
background-color: #F0F0F0;
background-color: var(--menu-background-color-hover);
transition-delay: 0s;
}
#tables_menu span {
display: block;
}
#tables_menu > span {
margin-right: 1rem;
height: 1.5rem;
}
#tables_menu span::after {
content: '\25E2';
position: absolute;
right: 0;
display: inline-block;
font-weight: bold;
transition: transform 0.05s linear 0.2s;
}
#tables_menu > span::after {
right: 0.5rem;
margin-top: calc(-1 * var(--border-width));
}
#tables_menu:hover > span::after {
transform: rotate(45deg);
transition-delay: 0s;
}
#tables_menu ul {
position: absolute;
z-index: 99999;
display: block;
visibility: hidden;
margin: 0;
margin-block-start: 0;
margin-block-end: 0;
padding: 0;
padding-inline-start: 0;
list-style-type: none;
transition: visibility 0s linear 0.2s;
}
#tables_menu:hover > ul {
visibility: visible;
transition-delay: 0s;
}
#tables_list ul {
top: 0;
left: 100%;
border-radius: 0;
}
#tables_list li:first-child > ul {
top: calc(-1 * var(--border-width));
}
#tables_list li {
position: relative;
padding: 0.25rem 0.5rem;
background-color: White;
background-color: var(--menu-background-color);
}
#tables_list li.active {
background-color: #E0E0E0;
background-color: var(--menu-background-color-active);
}
#tables_menu li:hover {
background-color: #F0F0F0;
background-color: var(--menu-background-color-hover);
}
#tables_menu li.active:hover {
background-color: #D0D0D0;
background-color: var(--menu-background-color-active-hover);
}
#tables_list span {
position: relative;
padding-right: 1rem;
white-space: nowrap;
}
#tables_list li:hover > span::after {
transform: rotate(-45deg);
transition-delay: 0s;
}
#tables_list li[data-modpack] span::after {
display: none;
}
#tables_list {
top: 100%;
left: calc(-1 * var(--border-width));
}
#tables_list > li {
border-right: var(--border-width) solid Gray;
border-right-color: var(--menu-border-color);
border-left: var(--border-width) solid Gray;
border-left-color: var(--menu-border-color);
}
#tables_list > li:first-child {
border-top: var(--border-width) solid Gray;
border-top-color: var(--menu-border-color);
}
#tables_menu ul::after {
content: '';
display: block;
box-sizing: border-box;
width: 100%;
height: calc(0.5rem + var(--border-width));
border: var(--border-width) solid Gray;
border-top-width: 0;
border-color: var(--menu-border-color);
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
background-color: White;
background-color: var(--menu-background-color);
}
#tables_list ul > li {
border-right: var(--border-width) solid Gray;
border-right-color: var(--menu-border-color);
border-left: var(--border-width) solid Gray;
border-left-color: var(--menu-border-color);
}
#tables_list ul > li:first-child {
border-top: var(--border-width) solid Gray;
border-top-color: var(--menu-border-color);
border-radius: 0 0.5rem 0 0;
}
#tables_list ul > li:first-child:hover {
border-radius: 0;
}
#tables_list ul > li[data-modpack]:first-child:hover {
border-radius: 0 0.5rem 0 0;
}
#tables_list li:hover > ul, #tables_list li > ul:hover {
visibility: visible;
transition-delay: 0s;
}

/* FILTER */
#filter_div {
clear: left;
}
#filter {
height: 1.5rem;
padding: 0.25rem 0.5rem;
border: var(--border-width) solid Gray;
border-color: var(--filter-border-color);
border-radius: 0.5rem;
background-color: rgba(0, 240, 0, 0.05);
background-color: var(--filter-background-color);
transition: all 0.2s;
}
#filter:focus {
background-color: rgba(0, 240, 0, 0.15);
background-color: var(--filter-background-color-focus);
}
#filter:disabled {
background-color: rgba(240, 0, 0, 0.05);
background-color: var(--filter-background-color-disabled);
}

/* FILTER SELECTED ROWS */
body > input[id^="filter_selected_"] {
display: none !important;
}
#filter_selected {
position: relative;
box-sizing: content-box;
width: calc(14rem + 8 * var(--border-width));
height: 2rem;
margin: 0;
padding: 0;
border: var(--border-width) outset var(--filter-selected-border-color);
border-radius: 0.5rem;
list-style-type: none;
}
#filter_selected:hover {
z-index: 1;
height: auto;
margin-bottom: -18rem;
}
#filter_selected li {
display: inline-block;
width: calc(1.5rem + var(--border-width));
height: 2rem;
padding: 0;
line-height: 2rem;
background-color: var(--filter-selected-background-color);
}
#filter_selected li:first-child {
display: none;
padding: 0 0.5rem;
border-radius: 0.5rem 0.5rem 0 0;
}
#filter_selected li:nth-child(2), #filter_selected li:nth-child(2) label {
border-radius: 0.5rem 0 0 0.5rem;
}
#filter_selected li:last-child, #filter_selected li:last-child label {
border-radius: 0 0.5rem 0.5rem 0;
}
#filter_selected li:last-child {
width: 2rem;
}
#filter_selected:hover li {
display: block;
width: 100%;
}
#filter_selected:hover li:first-child {
width: calc(100% - 1rem);
}
#filter_selected label {
position: relative;
top: 0;
left: 0;
display: block;
width: 2rem;
height: 2rem;
padding: 0;
cursor: pointer;
}
#filter_selected label:hover {
background-color: var(--filter-selected-background-color-hover);
}
#filter_selected label::before, #filter_selected label::after {
content: '';
position: absolute;
top: calc(0.5rem - var(--border-width));
left: calc(0.5rem - var(--border-width));
display: block;
width: 1rem;
height: 1rem;
border: var(--border-width) solid Transparent;
background-color: Transparent;
}
#filter_selected:hover li:nth-child(2), #filter_selected:hover li:nth-child(2) label {
border-radius: 0;
}
#filter_selected:hover li:last-child, #filter_selected:hover li:last-child label {
border-radius: 0 0 0.5rem 0.5rem;
}
#filter_selected:hover label {
width: calc(100% - 2.5rem);
padding: 0 0.5rem 0 2rem;
}
#filter_selected span {
display: none;
}
#filter_selected:hover span {
display: inline-block;
}
#filter_selected label[for="filter_selected_none"]::before {
background-color: var(--table-color);
}
#filter_selected label[for="filter_selected_none"]::after {
border-color: var(--table-background-color-hover);
background-color: var(--table-background-color);
}
#filter_selected label[for="filter_selected_neutral"]::before {
background-color: var(--table-color-selected-neutral);
}
#filter_selected label[for="filter_selected_neutral"]::after {
border-color: var(--table-background-color-selected-neutral-hover);
background-color: var(--table-background-color-selected-neutral);
}
#filter_selected label[for="filter_selected_shift"]::before {
background-color: var(--table-color-selected-shift);
}
#filter_selected label[for="filter_selected_shift"]::after {
border-color: var(--table-background-color-selected-shift-hover);
background-color: var(--table-background-color-selected-shift);
}
#filter_selected label[for="filter_selected_ctrlshift"]::before {
background-color: var(--table-color-selected-ctrlshift);
}
#filter_selected label[for="filter_selected_ctrlshift"]::after {
border-color: var(--table-background-color-selected-ctrlshift-hover);
background-color: var(--table-background-color-selected-ctrlshift);
}
#filter_selected label[for="filter_selected_ctrl"]::before {
background-color: var(--table-color-selected-ctrl);
}
#filter_selected label[for="filter_selected_ctrl"]::after {
border-color: var(--table-background-color-selected-ctrl-hover);
background-color: var(--table-background-color-selected-ctrl);
}
#filter_selected label[for="filter_selected_ctrlalt"]::before {
background-color: var(--table-color-selected-ctrlalt);
}
#filter_selected label[for="filter_selected_ctrlalt"]::after {
border-color: var(--table-background-color-selected-ctrlalt-hover);
background-color: var(--table-background-color-selected-ctrlalt);
}
#filter_selected label[for="filter_selected_alt"]::before {
background-color: var(--table-color-selected-alt);
}
#filter_selected label[for="filter_selected_alt"]::after {
border-color: var(--table-background-color-selected-alt-hover);
background-color: var(--table-background-color-selected-alt);
}
#filter_selected label[for="filter_selected_altshift"]::before {
background-color: var(--table-color-selected-altshift);
}
#filter_selected label[for="filter_selected_altshift"]::after {
border-color: var(--table-background-color-selected-altshift-hover);
background-color: var(--table-background-color-selected-altshift);
}
#filter_selected label[for="filter_selected_ctrlaltshift"]::before {
background-color: var(--table-color-selected-ctrlaltshift);
}
#filter_selected label[for="filter_selected_ctrlaltshift"]::after {
border-color: var(--table-background-color-selected-ctrlaltshift-hover);
background-color: var(--table-background-color-selected-ctrlaltshift);
}
body > #filter_selected_none:checked ~ header #filter_selected label[for="filter_selected_none"]::after,
body > #filter_selected_neutral:checked ~ header #filter_selected label[for="filter_selected_neutral"]::after,
body > #filter_selected_shift:checked ~ header #filter_selected label[for="filter_selected_shift"]::after,
body > #filter_selected_ctrlshift:checked ~ header #filter_selected label[for="filter_selected_ctrlshift"]::after,
body > #filter_selected_ctrl:checked ~ header #filter_selected label[for="filter_selected_ctrl"]::after,
body > #filter_selected_ctrlalt:checked ~ header #filter_selected label[for="filter_selected_ctrlalt"]::after,
body > #filter_selected_alt:checked ~ header #filter_selected label[for="filter_selected_alt"]::after,
body > #filter_selected_altshift:checked ~ header #filter_selected label[for="filter_selected_altshift"]::after,
body > #filter_selected_ctrlaltshift:checked ~ header #filter_selected label[for="filter_selected_ctrlaltshift"]::after {
clip-path: polygon(evenodd, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 25.6% 44.3%, 39.3% 58%, 73.7% 15%, 86.2% 25%, 40.6% 81.9%, 14.3% 55.6%, 25.6% 44.3%);
}
body > #filter_selected_none:not(:checked) ~ #table tbody tr:not([class*="selected-"]),
body > #filter_selected_neutral:not(:checked) ~ #table tbody tr.selected-neutral,
body > #filter_selected_shift:not(:checked) ~ #table tbody tr.selected-shift,
body > #filter_selected_ctrlshift:not(:checked) ~ #table tbody tr.selected-ctrlshift,
body > #filter_selected_ctrl:not(:checked) ~ #table tbody tr.selected-ctrl,
body > #filter_selected_ctrlalt:not(:checked) ~ #table tbody tr.selected-ctrlalt,
body > #filter_selected_alt:not(:checked) ~ #table tbody tr.selected-alt,
body > #filter_selected_altshift:not(:checked) ~ #table tbody tr.selected-altshift,
body > #filter_selected_ctrlaltshift:not(:checked) ~ #table tbody tr.selected-ctrlaltshift {
display: none;
}

/* UNCHECK ALL ROWS */
#deselect_all_rows {
height: 1.5rem;
padding: 0.25rem 0.5rem;
border: var(--border-width) outset Gray;
border-color: var(--button-border-color);
border-radius: 0.5rem;
background-color: White;
background-color: var(--button-background-color);
color: var(--button-color);
cursor: pointer;
}
#deselect_all_rows:hover {
background-color: #F0F0F0;
background-color: var(--button-background-color-hover);
color: var(--button-color-hover);
}
#deselect_all_rows:active {
border-style: inset;
background-color: #E0E0E0;
background-color: var(--button-background-color-active);
color: var(--button-color-active);
}
#deselect_all_rows:active:hover {
background-color: #E0E0E0;
background-color: var(--button-background-color-active-hover);
color: var(--button-color-active-hover);
}

/* HELP */
#help_button {
display: inline-block;
width: calc(5rem / 3);
height: calc(5rem / 3);
border: calc(1rem / 6) outset #5F4FEF;
border-color: var(--help-button-background-color);
border-radius: 50%;
background-color: #5F4FEF;
background-color: var(--help-button-background-color);
font-size: 1.5rem;
color: white;
color: var(--help-button-color);
text-align: center;
cursor: pointer;
}
#help_button::after {
content: '?';
display: inline-block;
margin: auto;
}
#help_button:hover {
border-color: #6757F7;
border-color: var(--help-button-background-color-hover);
background-color: #6757F7;
background-color: var(--help-button-background-color-hover);
}
#help_button:active {
border-style: inset;
border-color: #5747E7;
border-color: var(--help-button-background-color-active);
background-color: #5747E7;
background-color: var(--help-button-background-color-active);
}
#help_div > input {
display: none !important;
}
#help_div > input + div {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
display: none;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.75);
}
#help_div > input:checked + div {
display: block;
}
#help_div > input + div > div {
display: table;
width: 100%;
height: 100%;
}
#help_div > input + div > div > label {
display: table-cell;
width: 100%;
height: 100%;
padding: 2rem;
vertical-align: middle;
text-align: center;
}
#help_content {
position: relative;
display: inline-block;
min-width: 10rem;
min-height: 10rem;
max-width: 100%;
max-width: min(100%, 100rem);
max-height: 100%;
margin: 0 auto;
padding: 2rem 2rem 4rem 2rem;
background-color: var(--background-color);
box-shadow: 0.5rem 0.5rem 1rem 0 rgba(0, 0, 0, 0.25);
text-align: justify;
}
#help_x, #help_close {
position: absolute;
display: block;
cursor: pointer;
}
#help_x {
top: 0;
right: 0;
width: 2rem;
height: 2rem;
line-height: 2rem;
font-size: 2rem;
text-align: center;
}
#help_close {
right: 1rem;
bottom: 1rem;
padding: 0.25rem 0.5rem;
border: var(--border-width) outset Gray;
border-color: var(--button-border-color);
border-radius: 0.5rem;
background-color: White;
background-color: var(--button-background-color);
line-height: 1.5rem;
text-align: center;
cursor: pointer;
}
#help_close:hover {
background-color: #F0F0F0;
background-color: var(--button-background-color-hover);
}
#help_close:active {
border-style: inset;
background-color: #E0E0E0;
background-color: var(--button-background-color-active);
}
#help_content .title {
display: block;
margin: 0 0 1.5rem 0;
font-size: 1.5rem;
font-weight: bold;
}
#help_content .title ~ .title {
margin-top: 4.5rem;
}
#help_content .ul {
display: block;
}
#help_content .li {
display: list-item;
margin-left: 2rem;
list-style-type: disc;
}

/* THEMES MENU */
#themes {
visibility: hidden;
visibility: var(--css3-only-visible);
position: fixed;
bottom: 0;
right: 0;
z-index: 999;
display: inline-block;
box-sizing: content-box;
width: 3rem;
height: 3rem;
color: Black;
color: var(--themes-color);
opacity: 0.5;
transition: opacity 0.05s linear 0.2s;
}
#themes:hover {
opacity: 1;
transition-delay: 0s;
}
#themes #themes_menu {
position: absolute;
right: 1rem;
bottom: 0.5rem;
display: inline-block;
width: 0;
height: 2rem;
border: 0 solid Gray;
border-color: var(--themes-border-color);
border-radius: 0.5rem;
background-color: White;
background-color: var(--themes-background-color);
white-space: nowrap;
cursor: pointer;
transition: right 0.05s linear 0.2s, width 0.05s linear 0.2s, padding 0.05s linear 0.2s, border-width 0s linear 0.25s, border-radius 0s linear 0.2s;
}
#themes:hover #themes_menu {
right: 3rem;
border-width: var(--border-width);
transition-delay: 0s, 0s, 0s, 0s, 0.2s;
}
#themes #themes_menu:hover {
border-radius: 0 0 0.5rem 0.5rem;
transition-delay: 0s;
}
#themes_menu > span {
display: block;
height: 1rem;
padding: 0.5rem 0;
border-radius: 0.5rem;
overflow: hidden;
text-overflow: clip;
transition: padding 0.05s linear 0.2s;
}
#themes_menu > span::after {
content: '\25E5';
position: absolute;
top: 0;
right: 0;
display: block;
width: 1rem;
height: 1.5rem;
padding: 0.25rem 0;
text-align: center;
font-weight: bold;
transition: all 0.05s linear 0.2s;
}
#themes:hover #themes_menu > span {
padding: 0.5rem;
border-radius: 0 0 0.5rem 0.5rem;
transition: padding 0.05s linear 0s;
}
#themes_menu > span:hover {
background-color: #F0F0F0;
background-color: var(--themes-background-color-hover);
}
#themes:hover #themes_menu > span::after {
right: 0.25rem;
transition: all 0.05s linear 0s;
}
#themes_menu:hover > span::after {
transform: rotate(-45deg);
transition-delay: 0s;
}
#themes_list {
position: absolute;
right: calc(-1 * var(--border-width));
left: calc(-1 * var(--border-width));
bottom: 2rem;
z-index: 99999;
display: block;
visibility: hidden;
margin: 0;
margin-block-start: 0;
margin-block-end: 0;
padding: 0;
padding-inline-start: 0;
list-style-type: none;
transition: visibility 0s linear 0.2s;
}
#themes_menu:hover ul {
visibility: visible;
transition-delay: 0s;
}
#themes_menu li {
padding: 0.25rem 0.5rem;
border-right: var(--border-width) solid Gray;
border-right-color: var(--themes-border-color);
border-left: var(--border-width) solid Gray;
border-left-color: var(--themes-border-color);
background-color: White;
background-color: var(--themes-background-color);
}
#themes_menu li.active {
background-color: #E0E0E0;
background-color: var(--themes-background-color-active);
}
#themes_menu li:hover {
background-color: #F0F0F0;
background-color: var(--themes-background-color-hover);
}
#themes_menu li.active:hover {
background-color: #D0D0D0;
background-color: var(--themes-background-color-active-hover);
}
#themes_menu li:first-child {
border-top: var(--border-width) solid Gray;
border-top-color: var(--themes-border-color);
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
#themes_menu li:last-child {
border-bottom: none;
}
#themes > span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
padding: 0.5rem;
}
#themes svg {
width: 100%;
height: 100%;
}
#themes svg path {
fill: Black;
fill: var(--themes-border-color);
}
#themes svg circle {
fill: White;
fill: var(--themes-background-color);
}
#themes svg #c1 {
fill: var(--table-background-color-selected-shift);
}
#themes svg #c2 {
fill: var(--table-background-color-selected-alt);
}
#themes svg #c3 {
fill: var(--table-background-color-selected-ctrlshift);
}
#themes svg #c4 {
fill: var(--table-background-color-selected-ctrl);
}

/* TABLE */
table {
clear: both;
margin: 0.5rem auto;
padding: 0;
border-collapse: collapse;
border-spacing: 0;
border: var(--border-width) solid Black;
border-color: var(--table-border-color-bold);
background-color: White;
background-color: var(--table-background-color);
color: Black;
color: var(--table-color);
}
colgroup, col, tr {
animation: FadeIn 0.25s ease-out;
}
colgroup + colgroup {
border-left: var(--border-width) solid Black;
border-left-color: var(--table-border-color-bold);
}
col + col {
border-left: var(--border-width) solid Silver;
border-left-color: var(--table-border-color-thin);
}
thead tr {
border-bottom: var(--border-width) solid Black;
border-bottom-color: var(--table-border-color-bold);
}
tbody tr + tr {
border-top: var(--border-width) solid Silver;
border-top-color: var(--table-border-color-thin);
}
th, td {
padding: 0.25rem 0.5rem;
}
tbody tr:hover td {
background-color: #EFEFEF;
background-color: var(--table-background-color-hover);
color: Black;
color: var(--table-color-hover);
}

tbody tr.selected-neutral td {
color: Black;
color: var(--table-color-selected-neutral);
background-color: #CFCFCF;
background-color: var(--table-background-color-selected-neutral);
}
tbody tr.selected-neutral:hover td {
color: Black;
color: var(--table-color-selected-neutral);
background-color: #BFBFBF;
background-color: var(--table-background-color-selected-neutral-hover);
}
tbody tr.selected-ctrl td {
color: Black;
color: var(--table-color-selected-ctrl);
background-color: #BFCFFF;
background-color: var(--table-background-color-selected-ctrl);
}
tbody tr.selected-ctrl:hover td {
color: Black;
color: var(--table-color-selected-ctrl);
background-color: #AFBFDF;
background-color: var(--table-background-color-selected-ctrl-hover);
}
tbody tr.selected-alt td {
color: Black;
color: var(--table-color-selected-alt);
background-color: #FFBFCF;
background-color: var(--table-background-color-selected-alt);
}
tbody tr.selected-alt:hover td {
color: Black;
color: var(--table-color-selected-alt);
background-color: #DFAFBF;
background-color: var(--table-background-color-selected-alt-hover);
}
tbody tr.selected-shift td {
color: Black;
color: var(--table-color-selected-shift);
background-color: #FFFFCF;
background-color: var(--table-background-color-selected-shift);
}
tbody tr.selected-shift:hover td {
color: Black;
color: var(--table-color-selected-shift);
background-color: #DFDFBF;
background-color: var(--table-background-color-selected-shift-hover);
}
tbody tr.selected-ctrlalt td {
color: Black;
color: var(--table-color-selected-ctrlalt);
background-color: #DFCFFF;
background-color: var(--table-background-color-selected-ctrlalt);
}
tbody tr.selected-ctrlalt:hover td {
color: Black;
color: var(--table-color-selected-ctrlalt);
background-color: #CFBFDF;
background-color: var(--table-background-color-selected-ctrlalt-hover);
}
tbody tr.selected-ctrlshift td {
color: Black;
color: var(--table-color-selected-ctrlshift);
background-color: #CFFFCF;
background-color: var(--table-background-color-selected-ctrlshift);
}
tbody tr.selected-ctrlshift:hover td {
color: Black;
color: var(--table-color-selected-ctrlshift);
background-color: #BFDFBF;
background-color: var(--table-background-color-selected-ctrlshift-hover);
}
tbody tr.selected-altshift td {
color: Black;
color: var(--table-color-selected-altshift);
background-color: #FFDFBF;
background-color: var(--table-background-color-selected-altshift);
}
tbody tr.selected-altshift:hover td {
color: Black;
color: var(--table-color-selected-altshift);
background-color: #DFCFAF;
background-color: var(--table-background-color-selected-altshift-hover);
}
tbody tr.selected-ctrlaltshift td {
color: Black;
color: var(--table-color-selected-ctrlaltshift);
background-color: #4F4F4F;
background-color: var(--table-background-color-selected-ctrlaltshift);
}
tbody tr.selected-ctrlaltshift:hover td {
color: Black;
color: var(--table-color-selected-ctrlaltshift);
background-color: #3F3F3F;
background-color: var(--table-background-color-selected-ctrlaltshift-hover);
}

col.asc, col.desc {
background-color: #F7F7F7;
background-color: var(--table-background-color-sorted);
}
.sort {
position: relative;
padding-right: 0.75rem;
cursor: pointer;
}
.sort.asc::after, .sort.desc::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: block;
}
.sort.asc::after {
content: '\2193';
font-size: 1.35rem;
}
.sort.desc::after {
content: '\2191';
font-size: 1.25rem;
}
.hidden {
display: none;
}
.bool {
text-align: center;
}
.number {
text-align: right;
}
.multiplier:not([data-value="NaN"])::after {
content: '\D7';
}
html[lang="en"] .percent:not([data-value="NaN"])::after, html[lang="ja"] .percent:not([data-value="NaN"])::after {
content: '%';
}
html[lang="fr"] .percent:not([data-value="NaN"])::after, html[lang="de"] .percent:not([data-value="NaN"])::after {
content: '\A0%';
}
.multiplier::after, .percent::after {
display: inline;
}
.trait {
text-align: center;
}
.material {
position: relative;
padding-left: 2rem;
font-weight: bold;
}
.material img {
position: absolute;
top: 50%;
left: 0.5rem;
width: auto;
height: calc(4rem / 3);
margin-top: calc(-2rem / 3);
image-rendering: pixelated;
}

tbody tr .mining_level {
text-align: center;
text-shadow: 1px 1px 0 var(--table-shadow);
}
tbody tr.selected-neutral .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-neutral);
}
tbody tr.selected-neutral:hover .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-neutral-hover);
}
tbody tr.selected-ctrl .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-ctrl);
}
tbody tr.selected-ctrl:hover .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-ctrl-hover);
}
tbody tr.selected-alt .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-alt);
}
tbody tr.selected-alt:hover .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-alt-hover);
}
tbody tr.selected-shift .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-shift);
}
tbody tr.selected-shift:hover .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-shift-hover);
}
tbody tr.selected-ctrlalt .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-ctrlalt);
}
tbody tr.selected-ctrlalt:hover .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-ctrlalt-hover);
}
tbody tr.selected-ctrlshift .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-ctrlshift);
}
tbody tr.selected-ctrlshift:hover .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-ctrlshift-hover);
}
tbody tr.selected-altshift .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-altshift);
}
tbody tr.selected-altshift:hover .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-altshift-hover);
}
tbody tr.selected-ctrlaltshift .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-ctrlaltshift);
}
tbody tr.selected-ctrlaltshift:hover .mining_level {
text-shadow: 1px 1px 0 var(--table-shadow-selected-ctrlaltshift-hover);
}

@keyframes FadeIn {
0% {
opacity: 0;
border-color: Transparent;
}
100% { }
}

/* TOOLTIPS */
.tooltip-box {
position: relative;
display: inline-block;
padding: 0 0.2rem;
border: var(--border-width) solid Transparent;
white-space: nowrap;
cursor: default;
}
.tooltip-box > .tooltip {
display: none;
position: absolute;
bottom: 1.5rem;
left: 0;
z-index: 1;
width: 50rem;
width: max-content;
}
.tooltip-box > .tooltip.left {
left: auto;
right: 0;
}
.tooltip-box > .tooltip.bottom {
top: 1.5rem;
bottom: auto;
}
.tooltip-box > .tooltip > span {
display: inline-block;
min-width: 5rem;
max-width: 15rem;
padding: 0.5rem;
outline-color: var(--tooltip-outline-color);
border: calc(2 * var(--border-width)) solid var(--tooltip-border-color);
background-color: var(--tooltip-background-color);
white-space: normal;
text-align: initial;
color: White;
color: var(--tooltip-color);
}
.tooltip-box > .tooltip > span .mod {
font-style: italic;
color: var(--tooltip-color-mod);
text-shadow: 1px 1px 0 var(--tooltip-color-mod-shadow);
}
.tooltip-box:hover {
border-color: var(--tooltipbox-border-color);
background-color: var(--tooltipbox-background-color);
}
.tooltip-box:hover > .tooltip {
display: block;
}
.tooltip-box:hover > .tooltip:hover {
display: none;
}
.selected-ctrlaltshift .tooltip-box:hover {
border-color: var(--tooltipbox-ctrlaltshift-border-color);
background-color: var(--tooltipbox-ctrlaltshift-background-color);
}

/* RANDOMS */
.key {
margin: 0 0.1rem;
padding: 0 0.2rem;
border: calc(3 * var(--border-width)) outset Silver;
border-radius: calc(3 * var(--border-width));
background-color: White;
font-family: monospace;
color: Black;
}