:root, ::before, ::after, ::selection {
--css3-only-visible: visible;
--rpx: 12px;
--border-width: 1px;
--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;
}

/* SIZES */
@media (min-width: 1800px) and (max-width: 1949px) { :root, ::before, ::after, ::selection { --rpx: 13px; } }
@media (min-width: 1950px) and (max-width: 2099px) { :root, ::before, ::after, ::selection { --rpx: 14px; } }
@media (min-width: 2100px) and (max-width: 2249px) { :root, ::before, ::after, ::selection { --rpx: 15px; } }
@media (min-width: 2250px) and (max-width: 2399px) { :root, ::before, ::after, ::selection { --rpx: 16px; } }
@media (min-width: 2400px) and (max-width: 2549px) { :root, ::before, ::after, ::selection { --rpx: 17px; } }
@media (min-width: 2550px) and (max-width: 2699px) { :root, ::before, ::after, ::selection { --rpx: 18px; } }
@media (min-width: 2700px) and (max-width: 2849px) { :root, ::before, ::after, ::selection { --rpx: 19px; } }
@media (min-width: 2850px) and (max-width: 2999px) { :root, ::before, ::after, ::selection { --rpx: 20px; } }
@media (min-width: 3000px) and (max-width: 3149px) { :root, ::before, ::after, ::selection { --rpx: 21px; } }
@media (min-width: 3150px) and (max-width: 3299px) { :root, ::before, ::after, ::selection { --rpx: 22px; } }
@media (min-width: 3300px) and (max-width: 3449px) { :root, ::before, ::after, ::selection { --rpx: 23px; } }
@media (min-width: 3450px) { :root, ::before, ::after, ::selection { --rpx: 24px; } }
@media (min-width: 2850px) { :root, ::before, ::after, ::selection { --border-width: 2px; } }

/* BASIC */
:focus-visible {
outline: none;
}
::selection {
background-color: Maroon;
color: White;
}
* {
box-sizing: content-box;
}
html {
width: 100%;
height: 100%;
padding: 0;
font-size: var(--rpx);
}
html, body {
margin: 0;
}
body {
width: calc(100% - var(--rpx));
height: calc(100% - var(--rpx));
padding: calc(var(--rpx) / 2);
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: calc(2 * var(--rpx));
}
h1, #tables_list_div, #filter_selected_div, #filter_div, #deselect_all_rows_div, #help_div {
float: left;
display: block;
min-height: calc(2 * var(--rpx) + 2 * var(--border-width));
margin: 0 calc(3 * var(--rpx)) calc(var(--rpx) / 2) 0;
}

/* LANGUAGES */
#langs {
position: absolute;
top: 0;
right: 0;
}
#langs > * {
display: inline-block;
width: calc(3 * var(--rpx));
height: calc(2 * var(--rpx));
margin: calc(var(--rpx) / 2) calc(var(--rpx) / 2) 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 calc(var(--rpx) / 2) 0 rgba(0, 0, 0, 0.1);
}

/* MODPACKS MENU */
#tables_menu {
position: relative;
display: inline-block;
padding: calc(var(--rpx) / 4) calc(var(--rpx) / 2);
border: var(--border-width) outset Gray;
border-color: var(--menu-border-color);
border-radius: calc(var(--rpx) / 2);
background-color: White;
background-color: var(--menu-background-color);
cursor: pointer;
transition: border-radius 0.05s linear 0.2s;
}
#tables_menu:hover {
border-radius: calc(var(--rpx) / 2) calc(var(--rpx) / 2) 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: var(--rpx);
height: calc(1.5 * var(--rpx));
}
#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: calc(var(--rpx) / 2);
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: calc(var(--rpx) / 4) calc(var(--rpx) / 2);
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: var(--rpx);
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(var(--rpx) / 2 + var(--border-width));
border: var(--border-width) solid Gray;
border-top-width: 0;
border-color: var(--menu-border-color);
border-bottom-left-radius: calc(var(--rpx) / 2);
border-bottom-right-radius: calc(var(--rpx) / 2);
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 calc(var(--rpx) / 2) 0 0;
}
#tables_list ul > li:first-child:hover {
border-radius: 0;
}
#tables_list ul > li[data-modpack]:first-child:hover {
border-radius: 0 calc(var(--rpx) / 2) 0 0;
}
#tables_list li:hover > ul, #tables_list li > ul:hover {
visibility: visible;
transition-delay: 0s;
}

/* FILTER */
#filter_div {
clear: left;
}
#filter {
height: calc(1.5 * var(--rpx));
padding: calc(var(--rpx) / 4) calc(var(--rpx) / 2);
border: var(--border-width) solid Gray;
border-color: var(--filter-border-color);
border-radius: calc(var(--rpx) / 2);
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(14 * var(--rpx) + 8 * var(--border-width));
height: calc(2 * var(--rpx));
margin: 0;
padding: 0;
border: var(--border-width) outset var(--filter-selected-border-color);
border-radius: calc(var(--rpx) / 2);
list-style-type: none;
}
#filter_selected:hover {
z-index: 1;
height: auto;
margin-bottom: calc(-18 * var(--rpx));
}
#filter_selected li {
display: inline-block;
width: calc(1.5 * var(--rpx) + var(--border-width));
height: calc(2 * var(--rpx));
padding: 0;
line-height: calc(2 * var(--rpx));
background-color: var(--filter-selected-background-color);
}
#filter_selected li:first-child {
display: none;
padding: 0 calc(var(--rpx) / 2);
border-radius: calc(var(--rpx) / 2) calc(var(--rpx) / 2) 0 0;
}
#filter_selected li:nth-child(2), #filter_selected li:nth-child(2) label {
border-radius: calc(var(--rpx) / 2) 0 0 calc(var(--rpx) / 2);
}
#filter_selected li:last-child, #filter_selected li:last-child label {
border-radius: 0 calc(var(--rpx) / 2) calc(var(--rpx) / 2) 0;
}
#filter_selected li:last-child {
width: calc(2 * var(--rpx));
}
#filter_selected:hover li {
display: block;
width: 100%;
}
#filter_selected:hover li:first-child {
width: calc(100% - var(--rpx));
}
#filter_selected label {
position: relative;
top: 0;
left: 0;
display: block;
width: calc(2 * var(--rpx));
height: calc(2 * var(--rpx));
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(var(--rpx) / 2 - var(--border-width));
left: calc(var(--rpx) / 2 - var(--border-width));
display: block;
width: var(--rpx);
height: var(--rpx);
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 calc(var(--rpx) / 2) calc(var(--rpx) / 2);
}
#filter_selected:hover label {
width: calc(100% - 2.5 * var(--rpx));
padding: 0 calc(var(--rpx) / 2) 0 calc(2 * var(--rpx));
}
#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: calc(1.5 * var(--rpx));
padding: calc(var(--rpx) / 4) calc(var(--rpx) / 2);
border: var(--border-width) outset Gray;
border-color: var(--button-border-color);
border-radius: calc(var(--rpx) / 2);
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(5 * var(--rpx) / 3);
height: calc(5 * var(--rpx) / 3);
border: calc(var(--rpx) / 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: calc(1.5 * var(--rpx));
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: calc(2 * var(--rpx));
vertical-align: middle;
text-align: center;
}
#help_content {
position: relative;
display: inline-block;
min-width: calc(10 * var(--rpx));
min-height: calc(10 * var(--rpx));
max-width: 100%;
max-width: min(100%, calc(100 * var(--rpx)));
max-height: 100%;
margin: 0 auto;
padding: calc(2 * var(--rpx)) calc(2 * var(--rpx)) calc(4 * var(--rpx)) calc(2 * var(--rpx));
background-color: var(--background-color);
box-shadow: calc(var(--rpx) / 2) calc(var(--rpx) / 2) var(--rpx) 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: calc(2 * var(--rpx));
height: calc(2 * var(--rpx));
line-height: calc(2 * var(--rpx));
font-size: calc(2 * var(--rpx));
text-align: center;
}
#help_close {
right: var(--rpx);
bottom: var(--rpx);
padding: calc(var(--rpx) / 4) calc(var(--rpx) / 2);
border: var(--border-width) outset Gray;
border-color: var(--button-border-color);
border-radius: calc(var(--rpx) / 2);
background-color: White;
background-color: var(--button-background-color);
line-height: calc(1.5 * var(--rpx));
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 calc(1.5 * var(--rpx)) 0;
font-size: calc(1.5 * var(--rpx));
font-weight: bold;
}
#help_content .title ~ .title {
margin-top: calc(4.5 * var(--rpx));
}
#help_content .ul {
display: block;
}
#help_content .li {
display: list-item;
margin-left: calc(2 * var(--rpx));
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: calc(3 * var(--rpx));
height: calc(3 * var(--rpx));
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: var(--rpx);
bottom: calc(var(--rpx) / 2);
display: inline-block;
width: 0;
height: calc(2 * var(--rpx));
border: 0 solid Gray;
border-color: var(--themes-border-color);
border-radius: calc(var(--rpx) / 2);
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: calc(3 * var(--rpx));
border-width: var(--border-width);
transition-delay: 0s, 0s, 0s, 0s, 0.2s;
}
#themes #themes_menu:hover {
border-radius: 0 0 calc(var(--rpx) / 2) calc(var(--rpx) / 2);
transition-delay: 0s;
}
#themes_menu > span {
display: block;
height: var(--rpx);
padding: calc(var(--rpx) / 2) 0;
border-radius: calc(var(--rpx) / 2);
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: var(--rpx);
height: calc(1.5 * var(--rpx));
padding: calc(var(--rpx) / 4) 0;
text-align: center;
font-weight: bold;
transition: all 0.05s linear 0.2s;
}
#themes:hover #themes_menu > span {
padding: calc(var(--rpx) / 2);
border-radius: 0 0 calc(var(--rpx) / 2) calc(var(--rpx) / 2);
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: calc(var(--rpx) / 4);
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: calc(2 * var(--rpx));
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: calc(var(--rpx) / 4) calc(var(--rpx) / 2);
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: calc(var(--rpx) / 2);
border-top-right-radius: calc(var(--rpx) / 2);
}
#themes_menu li:last-child {
border-bottom: none;
}
#themes > span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
padding: calc(var(--rpx) / 2);
}
#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: calc(var(--rpx) / 2) 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: calc(var(--rpx) / 4) calc(var(--rpx) / 2);
}
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: calc(0.75 * var(--rpx));
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: calc(1.35 * var(--rpx));
}
.sort.desc::after {
content: '\2191';
font-size: calc(1.25 * var(--rpx));
}
.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: calc(2 * var(--rpx));
font-weight: bold;
}
.material img {
position: absolute;
top: 50%;
left: calc(var(--rpx) / 2);
width: auto;
height: calc(4 * var(--rpx) / 3);
margin-top: calc(-2 * var(--rpx) / 3);
image-rendering: pixelated;
}

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

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

/* TOOLTIPS */
.tooltip-box {
position: relative;
display: inline-block;
padding: 0 calc(var(--rpx) / 5);
border: var(--border-width) solid Transparent;
white-space: nowrap;
cursor: default;
}
.tooltip-box > .tooltip {
display: none;
position: absolute;
bottom: calc(1.5 * var(--rpx));
left: 0;
z-index: 1;
width: calc(50 * var(--rpx));
width: max-content;
}
.tooltip-box > .tooltip.left {
left: auto;
right: 0;
}
.tooltip-box > .tooltip.bottom {
top: calc(1.5 * var(--rpx));
bottom: auto;
}
.tooltip-box > .tooltip > span {
display: inline-block;
min-width: calc(5 * var(--rpx));
max-width: calc(15 * var(--rpx));
padding: calc(var(--rpx) / 2);
outline: calc(2 * var(--border-width)) solid rgba(0, 0, 0, 0.9);
outline-color: var(--tooltip-outline-color);
border: calc(2 * var(--border-width)) solid rgba(32, 0, 64, 0.9);
border-color: var(--tooltip-border-color);
background-color: rgba(0, 0, 0, 0.9);
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: #5555FF;
color: var(--tooltip-color-mod);
text-shadow: calc(1.5 * var(--border-width)) calc(1.5 * var(--border-width)) 0 #15153F;
text-shadow: calc(1.5 * var(--border-width)) calc(1.5 * var(--border-width)) 0 var(--tooltip-color-mod-shadow);
}
.tooltip-box:hover {
border-color: rgba(0, 0, 0, 0.2);
border-color: var(--tooltipbox-border-color);
background-color: rgba(0, 0, 0, 0.1);
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: rgba(255, 255, 255, 0.2);
border-color: var(--tooltipbox-ctrlaltshift-border-color);
background-color: rgba(255, 255, 255, 0.1);
background-color: var(--tooltipbox-ctrlaltshift-background-color);
}

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