/*
    Site-wide theme tokens. :root is the desktop default; body.mobile and body.obs below override
    only what that frontend needs to differ on, and a theme does the same.

    Rules:
    - Name a token for what it is FOR, not what it looks like
    - Callsites call the role, never a primitive (--grey-*, --white, --black)
    - Only redeclare in a body scope to actually change the value, never verbatim
    - Two things sharing a value still get two tokens if they are two different things
    - A token composed out of another token has to sit on `body`, not :root, or a theme override
      of the rung underneath never reaches it
    - An `inherit` default is a theme hook: the normal theme leaves the property alone
*/
:root {
    /*Primitives*/
    --white: rgb(var(--white-rgb));
    --black: rgb(var(--black-rgb));
    --grey-238: rgb(var(--grey-238-rgb));
    --grey-225: rgb(var(--grey-225-rgb));
    --grey-204: rgb(var(--grey-204-rgb));
    --grey-136: rgb(var(--grey-136-rgb));
    --grey-128: rgb(var(--grey-128-rgb));
    --grey-85: rgb(var(--grey-85-rgb));
    --grey-36: rgb(var(--grey-36-rgb));
    --grey-35: rgb(var(--grey-35-rgb));
    --grey-32: rgb(var(--grey-32-rgb));
    --grey-21: rgb(var(--grey-21-rgb));
    --grey-17: rgb(var(--grey-17-rgb));

    /*Foundations*/
    --site-text: var(--white);
    --site-background: var(--black);
    --site-border: var(--white);
    --shadow-color: var(--black);
    --subreddit-link-text: var(--white);
    --credit-line-text: var(--site-text);

    /*Text roles*/
    --heading-text: inherit;
    --subheading-text: var(--heading-text);
    --subheading-deep-text: var(--subheading-text);
    --body-text: inherit;
    --label-text: inherit;
    --wincond-text: inherit;
    --heading-text-shadow: inherit;
    --body-text-shadow: inherit;
    --wincond-text-shadow: 0 0 0 transparent, 0 0 0 transparent;
    --link-text: var(--site-text);
    --input-text: var(--site-text);
    --dark-button-text: var(--site-text);
    --settings-button-text: var(--site-text);

    /*Icons*/
    --icon-color: var(--white);
    --icon-color-hover: rgba(255, 255, 255, 0.85);
    --icon-fill: currentColor;
    --widget-icon-color: var(--icon-color-hover);
    --widget-icon-color-hover: var(--icon-color);
    --info-icon-color: rgb(var(--white-rgb));
    --info-icon-color-hover: var(--info-icon-color);
    --info-icon-opacity: .5;
    --info-icon-opacity-hover: .75;
    --refresh-button-color: currentColor;

    /*Status*/
    --good-color: #199b1e;
    --bad-color: #d41c1c;
    --warn-color: #ff8800;

    /*Cards: the light loadout tiles, so their text runs dark*/
    --card-text: var(--black);
    --card-heading-text: var(--black);

    --anynone-display-text: var(--card-text);
    --anynone-display-dark-text: var(--site-text);
    --compact-anynone-text: var(--anynone-display-dark-text);
    --mobile-anynone-text: var(--anynone-display-dark-text);
    --anynone-display-shadow: none;
    --toon-text: black;
    --compact-toon-text: white;

    /*Known-issues / update notices*/
    --notice-list-text: #b21717;

    /*Tooltips*/
    --tooltip-text: var(--white);
    --tooltip-description-text: #e3e3e3;
    --tooltip-description-text-rgb: 227, 227, 227;
    --tooltip-quote-text: yellow;
    --tooltip-accent-text: purple;
    --tooltip-background: var(--grey-17);
    --tooltip-background-rgb: var(--grey-17-rgb);
    --tooltip-border: var(--black);
    --tooltip-edge: rgba(var(--white-rgb), .75);
    --tooltip-glow: rgba(var(--white-rgb), .75);
    --tooltip-description-shadow: #525252;

    /*Modal*/
    --modal-background: #373737e0;
    --modal-border: var(--grey-136);
    --modal-close-text: #aaa;
    --modal-close-text-hover: var(--site-text);
    --modal-row-odd-background: rgba(35, 35, 35, 0.88);
    --modal-row-even-background: rgba(45, 45, 45, 0.88);
    --modal-row-group-background: rgba(70, 70, 70, 0.75);

    /*Popups: ko-fi, subscription reminder, referral ad*/
    --popup-background: var(--grey-21);
    --popup-glow: var(--white);
    --popup-button-background: #515151;
    --popup-button-background-hover: #6a6a6a;
    --popup-button-primary-background: #6a6a6a;
    --popup-button-primary-background-hover: #7a7a7a;

    /*FloaterSys panels*/
    --floater-background: #1e1e1e;
    --floater-border: rgba(var(--white-rgb), 0.15);

    /*Panels, fieldsets and inputs*/
    --panel-background: #303133;
    --panel-background-hover: #353638;
    --surface-background-rgb: 38, 38, 38;
    --panel-inset-background: #00000045;
    --panel-inset-border: #ffffff73;
    --fieldset-background: #00000075;
    --aside-background: var(--black);
    --chip-background: #1d1d1d;
    --active-chip-background: rgba(70, 120, 255, 0.18);
    --active-chip-text: #9db7ff;
    --active-chip-border: rgba(70, 120, 255, 0.55);
    --playstyle-chip-background: var(--surface-background-soft);
    --playstyle-chip-border: var(--divider-border);
    --playstyle-chip-text: inherit;
    --dark-input-background: var(--grey-21);
    --input-border: #ddd;
    --input-border-subtle: var(--grey-238);
    --divider-border: var(--grey-128);
    --dropdown-edge: #17181aa6;
    --dropdown-item-background-hover: #1a1c1c;

    /*Currency picker, global info rows, submenu skin*/
    --currency-select-text-rgb: var(--grey-204-rgb);
    --currency-table-head-background: rgba(20, 20, 20, 0.95);
    --currency-code-text: #31d1e1;
    --globalinfo-entry-rgb: 10, 10, 10;
    --dropdown-skin-text: #2c3338;

    /*Buttons*/
    --button-text: var(--grey-85);
    --button-background: #ddd;
    --button-background-hover: var(--grey-238);
    --button-background-active: #e9e9e9;
    --button-border: #bbb;
    --button-text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
    --button-font-weight: bold;
    --dark-button-background: #565656;
    --dark-button-background-hover: #636363;
    --button-border-disabled: #eaeaea;
    --button-background-disabled: #fafafa;
    --button-text-disabled: #999;
    --new-button-edge: var(--grey-128);
    --new-button-background-active: #4a4b4d;
    --settings-button-background: #303133;
    --settings-button-background-hover: #353638;
    --settings-button-background-active: #4a4b4d;
    --button-styled-background: #201c48;

    /*Text selection (::selection)*/
    --text-selection-color: #bfbebe;
    --text-selection-background: rgba(21, 21, 21, 0.8);

    /*Drag-select box, and the selected state it leaves behind*/
    --selection-box-border: rgba(76, 0, 119, 0.81);
    --selected-background-rgb: 46, 115, 252;
    --selected-background: rgba(var(--selected-background-rgb), .11);
    --selected-border: rgba(196, 187, 255, 0.99);
    --selected-shadow: rgba(200, 175, 255, .25);
    --selected-shadow-inset: rgba(50, 100, 250, .25);
    --selected-shadow-hover: rgba(200, 175, 255, .5);
    --selected-shadow-inset-hover: rgba(50, 100, 250, .5);

    /*Scroll-to-top button*/
    --scroll-button-background: #767676;
    --scroll-button-background-hover: #1b1c1e;
    --scroll-button-arrow: #1b1c1e;
    --scroll-button-arrow-hover: var(--white);

    /*Scrollbars*/
    --scrollbar-background: var(--grey-128);
    --scrollbar-background-hover: darkgray;
    --scrollbar-background-active: var(--grey-85);
    --scrollbar-track-shadow: var(--grey-128);

    /*Toggle switch*/
    --switch-off-background: #2196F3;
    --switch-off-gradient-mid: rgba(20, 83, 132, 1);
    --switch-off-gradient-end: rgba(16, 65, 103, 1);
    --switch-on-background: #2196F3;
    --switch-on-gradient-mid: var(--switch-off-gradient-mid);
    --switch-on-gradient-end: var(--switch-off-gradient-end);
    --switch-knob-background: var(--white);

    /*Config tabs*/
    --config-tab-border: currentColor;
    --config-tab-border-selected: var(--white);
    --config-tab-glow-rgb: 135, 135, 135;
    --config-killswitched-border: #ffc8c8;
    --beta-tag-text: #30c0ff;

    /*Advanced config panel*/
    --config-control-edge: var(--grey-128);
    --config-success-text: green;
    --config-input-background: var(--grey-128);
    --config-input-placeholder-text: rgb(var(--black-rgb));
    --config-input-focus-outline: #0d0d0d;
    --config-blocker-button-shadow: rgb(65, 70, 91);
    --config-blocker-button-text: rgb(220, 220, 220);
    --config-filter-heading-background: var(--black);

    /*The LvC code field*/
    --lvc-code-background: rgba(15, 15, 15, .5);
    --lvc-input-border: rgba(5, 5, 5, 0.1);

    /*The .checkbox2 skin in thisrando.css*/
    --checkbox-border: rgba(200, 204, 212, 0.75);
    --checkbox-background: transparent;
    --checkbox-inset: none;
    --checkbox-checked-background: #6871f1;
    --checkbox-checked-disabled-background: #3a3f8a;
    --checkbox-tick-color: rgba(var(--white-rgb), 0.75);
    /*auto is the browser's own blue, for boxes without the .checkbox2 skin*/
    --checkbox-native-accent: auto;
    --radio-native-accent: var(--checkbox-native-accent);

    --toggle-button-background: rgba(var(--black-rgb), .10);
    --toggle-button-background-hover: rgba(var(--black-rgb), .35);
    --toggle-button-background-pressed: rgba(var(--black-rgb), .5);
    --toggle-button-background-active: rgba(var(--black-rgb), .35);
    --toggle-button-background-active-hover: rgba(var(--black-rgb), .45);
    --toggle-button-border: var(--new-button-edge);
    --toggle-button-border-active: var(--new-button-edge);
    --toggle-button-text: inherit;
    --toggle-button-text-active: inherit;

    /*The flat toggle skin (.tgl-flat)*/
    --toggle-flat-background: rgb(var(--white-rgb));
    --toggle-flat-border: rgb(181, 181, 181);
    --toggle-flat-knob: var(--toggle-flat-border);
    --toggle-flat-checked: rgb(60, 162, 116);
    --toggle-flat-checked-background: rgb(230, 255, 239);
    --toggle-flat-knob-checked: var(--toggle-flat-checked);

    /*Comments*/
    --comment-name-text: rgb(140, 140, 140);
    --comment-muted-text: var(--grey-136);
    --comment-date-text: var(--comment-muted-text);
    --comment-content-text: var(--site-text);
    --comment-control-color: #777;
    --comment-control-color-hover: var(--grey-85);
    --comment-reply-text-hover: var(--button-text);
    --comment-show-more-text: #d5d5d5;
    --comment-show-more-background: #383839;
    --comment-show-more-background-hover: #515152;
    --comment-input-text: var(--black);
    --comment-input-placeholder-text: rgb(100, 100, 100);
    --comment-input-background: var(--white);
    --comment-input-border: var(--input-border);
    --comment-write-background: var(--dark-button-background);
    --comment-write-background-hover: var(--dark-button-background-hover);

    /*SweetAlert chrome, then the .style-30 button skin*/
    --swal-glow: rgb(120, 120, 120, 0.75);
    --swal-content-text: rgb(220, 220, 220);
    --swal-link-text-hover: var(--grey-225);
    --swal-note-text: var(--grey-204);
    --swal-close-text: var(--grey-204);
    --swal-close-text-hover: #ff8c8c;
    --swal-footer-border: rgba(80, 80, 80, 1);
    --swal-button-text: var(--black);
    --swal-button-background-hover: rgba(233, 233, 233, 1);
    --swal-button-edge: #D6D6E7;
    --swal-button-shadow-rgb: 45, 35, 66;
    --swal-focus-outline: rgba(255, 255, 0, 0.75);
    --swal-button-green: green;
    --swal-button-blue: #2778c4;

    /*AdBlock detection modal*/
    --adblock-button-background: var(--grey-17);
    --adblock-button-overlay-rgb: 25, 25, 25;
    --adblock-footer-text: var(--grey-136);
    --adblock-footer-text-hover: var(--grey-238);
    --adblock-certainty-text: var(--grey-204);
    --adblock-table-border: var(--grey-204);

    /*#SaveRandoDiv, the same three states on all three frontends*/
    --save-indicator-trying-color: orange;
    --save-indicator-trying-background: rgba(65, 50, 20, 0.75);
    --save-indicator-saved-color: #00ca00;
    --save-indicator-saved-background: rgba(10, 30, 10, 0.75);
    --save-indicator-error-color: red;
    --save-indicator-error-background: rgba(20, 0, 0, 0.75);

    /*Site banners*/
    --retired-banner-background: rgba(155, 0, 0, 0.66);
    --killswitched-banner-background: rgba(155, 50, 0, 0.66);
    --seasonal-banner-text: #ffbf00;
    --seasonal-banner-link: #ffce3a;
    --seasonal-toggle-text-hover: var(--grey-128);
    --dev-banner-background: rgba(255, 0, 0, 0.50);

    /*Theme effects: the effects menu's hint lines, then the spiderweb decoration's silk and spider*/
    --theme-effects-hint-text: var(--grey-136);
    --theme-web-color: var(--grey-204);
    --theme-web-spider-color: var(--grey-238);
    /*Body of the dark critters (bats, crows), and the halo that lifts any critter off the page. Read by JS and painted to canvas, so both have to stay opaque*/
    --theme-critter-color: var(--grey-85);
    --theme-critter-glow-color: var(--grey-204);

    /*Colour picker: the ring marking the swatch a field falls back to*/
    --colour-picker-default-swatch-ring: var(--white);
    /*Floater colour picker chrome: keyboard focus, the ring on the current colour's swatch, swatch and preview edges, and its buttons' borders. Defaults match floater-ui's own*/
    --colour-picker-focus: rgba(var(--white-rgb), 0.7);
    --colour-picker-active-ring: rgba(var(--white-rgb), 0.85);
    --colour-picker-edge: rgba(var(--white-rgb), 0.2);
    --colour-picker-button-border: rgba(var(--white-rgb), 0.22);
    --colour-picker-button-border-hover: rgba(var(--white-rgb), 0.35);

    /*Achievement/badge unlock popup. On five frontends, so it cannot be body-scoped*/
    --achievement-popup-rgb: var(--grey-21-rgb);

    /*Floating widgets: ThisRando, CosmeticRandomizer, then mobile's settings widget*/
    --widget-toggle-background: rgba(50, 50, 50, 0.75);
    --widget-toggle-background-hover: rgba(75, 75, 75, 0.75);
    --widget-toggle-border: rgba(150, 150, 150, 0.5);
    --widget-toggle-border-hover: rgba(175, 175, 175, 0.75);
    --widget-toggle-shadow: rgba(25, 25, 25, .5);
    --widget-toggle-shadow-hover: rgba(15, 15, 15, .75);
    --widget-toggle-shadow-inset: rgba(150, 150, 150, .33);
    --widget-toggle-shadow-inset-hover: rgba(150, 150, 150, .5);
    --widget-panel-background: rgba(0, 0, 0, 0.45);
    --widget-panel-background-mobile: rgba(35, 35, 35, 0.66);
    --settings-widget-background: rgba(38, 38, 38, 0.8);
    --settings-widget-background-narrow: rgba(30, 30, 30, 0.9);

    /*Cosmetic randomizer*/
    --cosmetic-panel-glow: rgba(200, 200, 200, 0.25);
    --cosmetic-randomize-glow: rgba(104, 113, 241, 0.25);
    --cosmetic-details-glow: rgba(206, 180, 144, 0.25);
    --cosmetic-edge-shadow: #090909;
    --cosmetic-grid-background: var(--grey-36);
    --cosmetic-tile-background: var(--grey-36);
    --cosmetic-tile-background-hover: rgba(50, 50, 50, 1);
    --cosmetic-tile-glow-rgb: 135, 135, 135;

    /*RandomizeTogether*/
    --together-modal-background: rgba(55, 55, 55, 0.75);
    --together-modal-background-fullscreen: rgb(45, 45, 45);
    --together-button-background: rgb(44, 44, 44);
    --together-button-background-hover: rgb(34, 34, 34);
    --together-button-background-active: rgb(54, 54, 54);
    --together-icon-button-background-hover: rgb(66, 66, 66);
    --together-icon-button-background-active: rgb(34, 34, 34);
    --together-leave-background: #3e1413;
    --together-leave-background-hover: #5e1e1c;
    --together-leave-background-active: #32100f;
    --together-player-surface-rgb: 20, 20, 20;
    --together-player-surface-deep-rgb: 10, 10, 10;
    --together-column-border: #c8c8c8;
    --together-player-footer-border: rgba(120, 120, 120, 0.5);

    /*Nav. The numbers are the ramp down each menu group, not a scale*/
    --nav-background: var(--black);
    --nav-utility-color: #404044;
    --nav-support-color: #0f3c60;
    --nav-auth-color: #1d1a44;
    --nav-auth-alt-color: #282368;
    --nav-item-color-default: rgba(74, 74, 74, 0.8);
    --nav-item-color-default-hover: rgba(74, 74, 74, 1);
    --nav-notch-color-default: #ff2b00;
    --nav-row-odd-color: #0c0959;
    --nav-row-even-color: #0d0971;
    --nav-account-1-color: #1e1a4f;
    --nav-account-2-color: #1a1742;
    --nav-account-3-color: #16133e;
    --nav-account-4-color: #100e31;
    --nav-account-5-color: #030049;
    --nav-support-1-color: #00206b;
    --nav-support-2-color: #042d48;
    --nav-support-3-color: #085486;
    --nav-support-4-color: #7289da;

    /*Account modal. Its own indigo palette, so nothing outside the modal reaches for these*/
    --account-panel-background-rgb: 32, 28, 72;
    --account-scrim-rgb: var(--grey-17-rgb);
    --account-subscription-background: #1a163c;
    --account-stat-item-background: #161238;
    --account-locked-background: #0a081c;
    --account-image-hover-background: #3c3679ad;
    --account-nav-background-active: #393188;
    --account-nav-background-hover: #2d285e;
    --account-row-background-even: #2c285e;
    --account-row-background-odd: #1b183f;
    --account-page-background: #2c285e;
    --account-page-background-active: #474094;
    --account-page-background-active-hover: #5c53bd;
    --account-page-container-background: #1b183f;
    --account-body-gradient-start: rgb(26, 23, 61);
    --account-body-gradient-mid: rgb(46, 41, 96);
    --account-body-gradient-end: rgb(36, 36, 62);
    --account-badge-selected-rgb: 62, 54, 140;
    --account-badge-primary-rgb: 56, 36, 236;
    --account-image-selected-background: rgb(60, 54, 121);
    --account-image-blocked-rgb: 21, 18, 61;
    --account-pfp-preview-background: rgba(25, 25, 75, 0.75);
    --account-list-background-rgb: 17, 14, 47;
    --account-stat-row-rgb: 25, 20, 52;
    --account-switch-layer-background: rgb(22, 18, 56);
    --account-dropdown-selected-background: rgb(20, 20, 30);
    --account-dropdown-hover-background: rgb(25, 25, 50);
    --account-nav-text: #e5e5e5;
    --account-locked-text: #a4a4a4;
    --account-image-hover-shadow: #3c3c3c;
    --account-achievement-shadow-rgb: 50, 50, 150;
    --account-picker-glow-rgb: var(--grey-225-rgb);
    --account-picker-selected-rgb: 12, 8, 42;
    --account-search-background-rgb: 15, 15, 15;
    --account-search-edge-rgb: 5, 5, 5;
    --account-favourite-background-rgb: 10, 10, 10;
    --account-favourite-item-rgb: 25, 25, 25;
    --account-upload-background: var(--grey-36);
    --account-upload-shadow: #0b0b0b;
    --account-upload-shadow-filled: var(--grey-85);
    --account-upload-success-rgb: 150, 255, 125;
    --account-upload-error-rgb: 255, 125, 125;
    --account-toggle-border-hover: #213140;
    --account-toggle-background-checked: #3b328e;
    --account-toggle-border-checked: #4b9dea;
    --account-toggle-glow-rgb: 102, 179, 251;
    --account-checkbox-border: #bbbbc1;
    --account-checkbox-border-hover: #9898a3;
    --account-checkbox-active: #6e7bf2;
    --account-checkbox-tick: white;
    --account-checkbox-tick-color: white;
    --account-switch-off-background: rgb(244, 67, 54);
    --account-switch-on-background: rgb(34, 139, 34);
    --account-form-underline: var(--grey-204);
    --account-form-label-focus-text: #9791d7;
    --account-form-warning-text: #ff6c00;
    --account-form-error-text: red;

    /*The paid-account perk lines*/
    --paid-highlight-text: #c0bbfd;

    /*The account-display tooltip, which is the account modal again when .IsModel is on*/
    --acctooltip-background-rgb: 51, 51, 51;
    --acctooltip-panel-background: #1c1c1c;
    --acctooltip-comment-background: var(--grey-21);
    --acctooltip-favourite-background: #110d02;

    /*[rgb triple] vars, so the alpha can vary per callsite*/
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --grey-238-rgb: 238, 238, 238;
    --grey-225-rgb: 225, 225, 225;
    --grey-204-rgb: 204, 204, 204;
    --grey-136-rgb: 136, 136, 136;
    --grey-128-rgb: 128, 128, 128;
    --grey-85-rgb: 85, 85, 85;
    --grey-36-rgb: 36, 36, 36;
    --grey-35-rgb: 35, 35, 35;
    --grey-32-rgb: 32, 32, 32;
    --grey-21-rgb: 21, 21, 21;
    --grey-17-rgb: 17, 17, 17;
    --status-retired-rgb: 255, 0, 0;
    --status-killswitched-rgb: 255, 150, 0;
    --status-pending-rgb: 0, 159, 255;
    --status-success-rgb: 76, 175, 80;
    --status-error-rgb: 255, 107, 107;
    --status-checking-rgb: 200, 200, 200;
    --status-retired-dark-rgb: 127, 0, 0;
    --status-killswitched-dark-rgb: 127, 75, 0;
    --status-retired-killswitched-rgb: 255, 50, 0;
    --status-retired-killswitched-dark-rgb: 127, 60, 0;
    --favourite-rgb: 255, 215, 0;

    /*Achievement and badge rarity*/
    --rarity-common: #996e50;
    --rarity-uncommon-rgb: 90, 255, 50;
    --rarity-rare-rgb: 255, 255, 20;
    --rarity-very-rare-rgb: 255, 20, 255;
    --rarity-ultra-rare-rgb: 255, 20, 20;
    --rarity-special-rgb: 255, 191, 0;
    --rarity-secret-rgb: 255, 255, 255;

    /*Image Render Settings surfaces*/
    --irs-section-header-background: rgba(50, 50, 50, 0.6);
    --irs-section-header-background-hover: rgba(65, 65, 65, 0.8);
    --irs-tab-active-background: rgba(55, 55, 55, 0.95);
    --irs-tab-rail: #2e2e2e;
    --irs-tab-rail-active: #3b3b3b;
    --irs-table-head-background: rgba(60, 60, 60, 0.99);
    --irs-tip-header-background: var(--grey-17);
    --irs-tip-title-text: rgba(var(--white-rgb), 0.5);
    --irs-description-text: rgb(180, 180, 180);
    --irs-section-title-text: rgba(var(--white-rgb), 0.6);

    /*IRS reset/destructive buttons*/
    --irs-reset-rgb: 200, 60, 60;
    --irs-reset-text-rgb: 255, 150, 150;

    /*IRS selected state on chips and bandwidth levels*/
    --irs-active-rgb: 80, 140, 220;
    --irs-active-text: rgba(180, 210, 255, 0.95);

    /*The four amber IRS signals. Close in value, each answering a different question*/
    --irs-notice-rgb: 255, 196, 84;
    --irs-override-rgb: 255, 195, 40;
    --irs-override-text: rgba(255, 210, 80, 0.9);
    --irs-missing-rgb: 255, 193, 7;
    --irs-tip-ok: #69c769;
    --irs-tip-missing: #f5a623;

    /*IRS per-modifier on/off labels in the mobile options tooltip*/
    --irs-mod-on-text: #8fd97a;
    --irs-mod-off-text: #ff8a80;

    /*IRS manifest refresh result. Also set from JS, so these carry a full value*/
    --irs-status-ok: #4ade80;
    --irs-status-error: #f87171;
    --irs-status-warn: #fbbf24;

    /*Star rating: a scale, not a ramp. Star 2 keeps the checked gold*/
    --star-empty: #503D2E;
    --star-checked: #A28428;
    --star-1: #F62;
    --star-3: #0D7512;
    --star-3-glow: #43b247;
    --star-4: #722187;
    --star-4-glow: #b243ac;
    --star-5: #C10A43;
    --star-5-glow: #b24343;

    /*The randomize button's three finished states, all written on the :after label*/
    --rando-button-disabled-text: rgba(255, 25, 1, 0.75);
    --rando-button-randomizing-text: rgba(255, 128, 1, 0.75);
    --rando-button-saved-text: rgba(100, 240, 40, 0.75);

    /*SweetAlert chrome still living in MainTheme and obs/core.css*/
    --swal-background: var(--grey-36);
    --swal-footer-link-hover: #d0d0d0;
    --swal-confirm-background: green;
    --swal-cancel-background: red;
    --swal-validation-text: #ea7070;

    /*Changelog modal*/
    --changelog-text: var(--grey-225);
    --changelog-nav-rgb: var(--grey-36-rgb);
    --changelog-entry-background: var(--grey-35);
    --changelog-entry-active-rgb: var(--grey-36-rgb);
    --changelog-entry-marker-rgb: 60, 60, 60;
    --changelog-entry-marker-border: rgba(var(--white-rgb), 1);
    --changelog-entry-first-background: #676767;
    --changelog-entry-hover-background: rgb(50, 50, 50);
    --changelog-entry-open-background: var(--grey-35);
    --changelog-entry-open-hover-background: rgba(25, 25, 25, 1);
    --changelog-section-background: rgba(50, 50, 50, .75);
    --changelog-section-hover-background: rgba(45, 45, 45, 1);
    --changelog-section-active-background: var(--grey-35);
    --changelog-section-mobile-background: rgba(40, 40, 40, .75);
    --changelog-section-mobile-hover-background: rgba(25, 25, 25, .75);
    --changelog-section-mobile-active-background: rgba(30, 30, 30, .75);
    --changelog-update-accent-background: rgba(120, 120, 120, .35);
    --changelog-update-inner-background: rgba(35, 35, 35, .95);
    --changelog-update-dot-background: rgba(140, 140, 140, .4);
    --changelog-update-text: rgba(80, 190, 255, .95);
    --changelog-retry-background: rgba(52, 52, 52, .9);
    --changelog-retry-background-hover: rgba(72, 72, 72, .9);
    --changelog-retry-text: rgba(255, 140, 140, .95);
    --changelog-load-retry-background: rgba(60, 60, 60, 0.8);
    --changelog-load-retry-background-hover: rgba(80, 80, 80, 0.8);
    /*The <b> category tags inside an entry's detail text*/
    --changelog-tag-killer: #FF3131;
    --changelog-tag-killer-power: #FF8C00;
    --changelog-tag-survivor: #0FFF50;
    --changelog-tag-perk: #BF40BF;
    --changelog-tag-addon: #40E0D0;
    --changelog-tag-realm: #4098e0;
    --changelog-tag-item: #edd348;

    /*The about tab strip (frontend/about/snippet) and nothing else*/
    --about-tab-title-text: #9a9a9a;
    --about-tab-text: var(--grey-204);
    --about-tab-background: rgba(25, 25, 25, 0.7);
    --about-tab-border: rgba(235, 235, 235, .2);
    /*Not the tabs despite the name: the version badge's text shadow on mobile*/
    --about-tab-shadow: rgba(154, 161, 173, 0.25);

    /*The page loader's spinners*/
    --loader-spinner-color: var(--white);
    --loader-spinner-color-alt: var(--loader-spinner-color);

    /*Assorted one-offs on the rando page*/
    --settings-note-text: #b9b9b9;
    --section-shadow-light: rgba(136, 136, 136, 0.75);
    --vote-arrow-border: var(--grey-85);
    --quantity-button-text: var(--grey-225);
    --compact-label-background: rgba(39, 40, 41, 0.85);
    --compact-heading-text: var(--site-text);
    --compact-text: var(--site-text);
    --compact-panel-background: rgba(35, 35, 35, 0.75);
    --item-tab-divider: var(--grey-128);

    /*Early access edge, then PayPal's navy on the main menu's donate row*/
    --early-access-glow-rgb: 255, 215, 0;
    --donate-paypal-background: #043A79;

    /*Loadout overrides modal: the transient status line, four states*/
    --override-status-done-text: #04a904;
    --override-status-busy-text: orange;
    --override-status-error-text: red;
    --override-status-inactive-text: #d58512;
    --override-section-rule: #323333;

    /*Auth modal, the login/register panel*/
    --auth-accent-color: #573b8a;
    --auth-accent-rgb: 87, 59, 138;
    --auth-accent-color-hover: #6d44b8;
    --auth-gradient-start: rgb(25, 22, 59);
    --auth-gradient-end: rgb(31, 28, 70);
    --auth-card-gradient-start: var(--account-body-gradient-start);
    --auth-card-gradient-mid: var(--account-body-gradient-mid);
    --auth-card-gradient-end: var(--account-body-gradient-end);
    --auth-input-background: #c8c6d9;
    --auth-input-placeholder-text: rgba(var(--black-rgb), 0.6);
    --auth-checkbox-tick: var(--auth-accent-color);
    --auth-button-text: var(--dark-button-text);
    --auth-arc-idle-start: var(--auth-gradient-start);
    --auth-arc-idle-end: var(--auth-gradient-end);
    --auth-arc-shadow: none;
    --auth-input-background-focus: var(--grey-238);
    --auth-input-border: var(--grey-238);
    --auth-panel-background: var(--grey-238);
    --auth-info-box-border: var(--grey-238);
    --auth-link-text: #717171;
    --auth-link-text-hover: #363636;
    --auth-error-text: #ff2c2c;
    --auth-input-text: var(--card-text);
    --auth-heading-text: var(--auth-accent-color);
    --auth-checkbox-background: rgb(var(--white-rgb));

    /*The two standalone password reset pages, which render outside the rando layout*/
    --reset-page-background: #1d1d1d;
    --reset-card-background: #2a2a2a;
    --reset-input-background: #3a3a3a;
    --reset-input-border: var(--grey-85);
    --reset-muted-text: var(--grey-204);
    --reset-button-background: #5c5c5c;
    --reset-button-background-hover: #4a4a4a;
    --reset-button-background-disabled: var(--grey-136);

    /*Ko-fi button and the downloads page select*/
    --kofi-button-background: #1c1b1d;
    --kofi-button-background-hover: var(--grey-32);
    --kofi-button-text-hover: #f5f5f5;
    --download-select-background: var(--grey-32);
    --kofi-text-shadow: rgba(34, 34, 34, 0.05);
    --kofi-button-glow-rgb: 122, 122, 122;

    /*Reserved account colours, for the Alphaproject/Itsmyghost accounts only*/
    --AlphaColor: rgb(48, 192, 255);
    --GhostColor: rgb(0, 128, 0);

    /*[font-family] vars*/
    --font-heading: 'Frijole', sans-serif;
    --font-hand: 'Architects Daughter', sans-serif;
    --font-marker: 'Permanent Marker', sans-serif;
    --font-script: 'Gloria Hallelujah', sans-serif;
    --font-scrawl: 'Indie Flower', sans-serif;
    --font-brush: 'East Sea Dokdo', sans-serif;
    --font-ui: "Nanum Gothic", sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --f6-font-family: "Nanum Gothic", Consolas, Courier New, monospace;
    --f7-font-family: Consolas, Courier New, monospace;

    /*[border-radius] vars. Callsites pick from it by eye, not by kind*/
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-xxl: 25px;
    --radius-switch: 34px;
    --radius-round: 50%;
    --radius-full: 999px;

    /*Stays at :root: obs/core.css reads it inside an html {} rule, and on body the calc() voids*/
    --section-margin: 5px;

    /*[transition] vars. Keep the scale in value order, the names are all that say which is longer*/
    --transition-easing-function-default: ease-in-out;
    --transition-easing-function-menu: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-instant-time: .1s;
    --transition-instant: var(--transition-instant-time) var(--transition-easing-function-default);
    --transition-fast-time: .25s;
    --transition-fast: var(--transition-fast-time) var(--transition-easing-function-default);
    --transition-base-time: .33s;
    --transition-base: var(--transition-base-time) var(--transition-easing-function-default);
    --transition-slow-time: .5s;
    --transition-slow: var(--transition-slow-time) var(--transition-easing-function-default);
    --transition-slower-time: .66s;
    --transition-slower: var(--transition-slower-time) var(--transition-easing-function-default);
    --transition-slowest-time: 1s;
    --transition-slowest: var(--transition-slowest-time) var(--transition-easing-function-default);
    --transition-modal-time: .8s;
    --transition-modal: var(--transition-modal-time) var(--transition-easing-function-default);
    --transition-menu-time: 300ms;
    --transition-menu: var(--transition-menu-time) var(--transition-easing-function-menu);
    --transition-toggle-time: .4s;
    --transition-toggle: var(--transition-toggle-time) var(--transition-easing-function-default);

    /*[font-size] vars: the scale, value-named on purpose. The role tier is on `body` below.
      Anything off the scale takes an offset off the nearest rung, never a rung of its own*/
    --font-size-xxs: 10px;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 48px;

    /*[z-index] layer vars: the rungs already in use, kept at their values because vendor CSS/JS is
      pinned to numbers we don't control. Local sibling ordering (0-10) stays raw*/
    --z-chrome: 50;
    --z-raised: 100;
    --z-sticky: 999;
    --z-overlay: 1000;
    --z-popup: 10000;
    --z-banner: 99990;
    /*floater-ui panels: over the mobile header and widget bar, under modals and tooltips. Two above the banner so a modal floater's backdrop fits between*/
    --z-floater: calc(var(--z-banner) + 2);
    --z-modal: 99999;
    --z-top: 999999;

    /*Decorative gradients, held whole: the stops mean nothing apart*/
    --counter-gradient: linear-gradient(to right, #199b1e, #cc3ad4, #e8c252, #ff8800, #ab713c, var(--white));
    --nav-burger-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --adblock-icon-gradient: linear-gradient(#9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);
    --adblock-glow-gradient: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
}

/*
    [font-size] role vars: what a piece of text IS, pointed at a rung from the scale above.
    Repoint one line to move a whole role at once, in every frontend.

    On `body` and not `:root` on purpose, along with the accent: a role at :root would resolve its
    rung against html and never see a body.mobile / body.obs / body.halloween override of it.
*/
body {
    --meta-font-size: var(--font-size-xxs); /*timestamps, "last updated", micro counts*/
    --note-font-size: calc(var(--font-size-xs) - 1px); /*small print: notices, descriptions, hints, <small>*/
    --tooltip-body-font-size: var(--font-size-sm); /*.tippy-box and the description blocks inside it*/
    --comment-body-font-size: var(--font-size-sm); /*comment text and its inline controls*/
    --comment-name-font-size: var(--font-size-md); /*comment author name*/
    --panel-title-font-size: var(--font-size-md); /*widget, section and panel titles*/
    --inline-clear-font-size: var(--font-size-md); /*the x/clear glyph inside a search field*/

    /*Off the scale on purpose, each keeping its old size through an offset*/
    --modal-close-font-size: calc(var(--font-size-2xl) - 4px);
    --randomize-button-font-size: calc(var(--font-size-2xl) - 4px);
    --addon-font-size: calc(var(--font-size-2xl) - 4px);
    --star-font-size: calc(var(--font-size-2xl) + 4px);
    --nav-title-font-size: calc(var(--font-size-3xl) - 6px);
    --tooltip-title-font-size: calc(var(--font-size-lg) + 3px);

    --switch-track-background: var(--switch-off-background);
    --switch-track-gradient-mid: var(--switch-off-gradient-mid);
    --switch-track-gradient-end: var(--switch-off-gradient-end);
    --switch-track-background-on: var(--switch-on-background);
    --switch-track-gradient-mid-on: var(--switch-on-gradient-mid);
    --switch-track-gradient-end-on: var(--switch-on-gradient-end);

    /*Callsites needing alpha read --accent-rgb, everything else --accent-color*/
    --accent-rgb: 255, 191, 0;
    --accent-color: rgb(var(--accent-rgb));
    --dropdown-item-text: var(--accent-color);
}

/*Mobile overrides; anything not redeclared here inherits the desktop default above*/
body.mobile {
    /*Foundations*/
    --site-background-fade: rgba(0, 0, 0, 0.5);
    --site-loading-text: var(--site-text);
    --accent-background: rgb(0, 0, 255);
    --accent-text-shadow: rgba(255, 191, 0, 0.25);
    --label-text: rgb(200, 200, 200);
    --check-off-label-text: #969696;

    /*Surfaces: the translucent grey the sections, header and buttons all sit on*/
    --surface-background: rgba(38, 38, 38, 0.7);
    --surface-background-soft: rgba(38, 38, 38, 0.25);
    --surface-highlight: rgba(255, 255, 255, 0.25);
    --surface-shadow: rgba(0, 0, 0, 0.25);

    /*Header*/
    --header-background: var(--surface-background);
    --header-background-scrolled: rgba(30, 30, 30, 0.95);
    --header-navbutton-background-hover: rgba(128, 128, 128, 0.10);
    --header-navbutton-background-open: rgba(128, 128, 128, 0.25);
    --header-navbutton-background-open-hover: rgba(128, 128, 128, 0.35);
    --header-navbutton-background-active: rgba(128, 128, 128, 0.45);
    --header-navbutton-border: var(--grey-85);
    --header-navbutton-border-open: rgba(85, 85, 85, 0.75);

    /*Buttons. The shadow pair is the raised/pressed effect, dark half and light half*/
    --button-text: rgb(190, 190, 190);
    --button-text-hover: rgb(230, 230, 230);
    --button-text-active: rgb(250, 250, 250);
    --button-text-disabled: rgb(120, 120, 120);
    --button-text-shadow-color: rgba(0, 0, 0, 0.5);
    --button-background: var(--surface-background);
    --button-border: rgb(64, 76, 93);
    --button-border-disabled: rgb(58, 58, 58);
    --button-shadow: rgb(65, 70, 91);
    --button-shadow-hover-dark: rgb(32, 35, 46);
    --button-shadow-hover-light: rgb(84, 91, 120);
    --button-shadow-disabled: rgb(33, 33, 33);
    --button-tile-image: url("/Images/ImagePlaceholderTile.webp");
    --button-tile-filter-sepia: .5;
    --button-tile-filter-hue-rotate: 225deg;
    --button-tile-filter-brightness: 0.3;
    --button-tile-filter-brightness-tile: 0.5;

    /*Status*/
    --good-color: rgb(0, 128, 0);
    --good-background: rgb(0, 155, 0);
    --good-background-active: rgb(0, 168, 0);
    --good-border: rgb(22, 183, 22);
    --good-shadow: rgb(0, 128, 0);
    --good-drop-shadow: rgba(0, 128, 0, 0.2);
    --bad-color: rgb(227, 0, 0);
    --bad-background: rgb(191, 0, 0);
    --bad-background-active: rgb(191, 6, 6);
    --bad-border: rgb(251, 63, 63);
    --bad-shadow: rgb(215, 0, 0);
    --bad-drop-shadow: rgba(227, 0, 0, 0.2);
    --vote-bad-color: rgb(255, 0, 0);
    --vote-good-color: rgb(0, 128, 0);
    --vote-arrow-border: rgb(50, 50, 50);
    /*The hover fills are deeper than --vote-good/bad-color because the anchor is already running
      brightness(110%) over them*/
    --vote-arrow-border-hover: var(--grey-85);
    --vote-arrow-good-hover: #005200;
    --vote-arrow-bad-hover: #790000;

    /*Comments. Only the date differs, mobile runs it two shades darker*/
    --comment-date-text: rgb(113, 113, 113);

    /*Text selection (::selection)*/
    --text-selection-color: rgba(230, 230, 230, 0.5);
    --text-selection-background: rgba(0, 0, 0, 0.05);
    --text-selection-shadow: rgba(0, 0, 0, 0.75);

    /*Site notice: base glow and the pulse keyframes share it*/
    --notice-glow: rgba(255, 191, 0, 0.5);

    /*Loadout section divider: light grey for the glow and :after, darker for the bottom edge*/
    --loadout-divider-rgb: 150, 150, 150;
    --loadout-section-border: rgba(70, 70, 70, 0.75);

    /*The about tab strip on mobile*/
    --about-tab-background: var(--surface-background);
    --about-tab-border: var(--button-shadow);

    /*Modal close glyph, the same pair body.obs runs*/
    --modal-close-text: #989898;
    --modal-close-text-hover: #c0c0c0;

    /*Comments: darker show-more, muted label, gold reply hover*/
    --comment-show-more-text: var(--comment-muted-text);
    --comment-show-more-background: var(--grey-36);
    --comment-show-more-background-hover: #141515;
    --comment-reply-text-hover: #ab8a25;

    /*Mobile-only chrome, so these have no :root default*/
    --nav-divider-glow: rgba(150, 150, 150, 0.75);
    --remove-ads-text: rgb(220, 220, 220);
    --subreddit-link-text: #fc440d;
    --scrolltop-background: rgba(75, 75, 75, 0.5);
    --scrolltop-background-hover: rgba(50, 50, 50, 0.7);
    --scrolltop-background-scrolling: rgba(30, 30, 30, 0.90);
}

/*
    OBS overrides; anything not redeclared here inherits the desktop default above.

    Colours are rgb triple + alpha pairs so a rule can vary the opacity without restating the
    colour. Only the section background keeps split -r/-g/-b channels, because options.css and
    placement.css divide those channels to darken it.

    body.downloads rides on this block because the downloads page loads CSS/obs/main.css as its
    theme without being an OBS page. The class exists for that and nothing else.
*/
body.obs, body.downloads {
    --scroll-width: 10px;
    --section-border-width: 1px;
    --section-border-radius: var(--radius-lg);

    /*Sections*/
    --obs-section-background-r: 65;
    --obs-section-background-g: 65;
    --obs-section-background-b: 65;
    --obs-section-background-rgb: var(--obs-section-background-r), var(--obs-section-background-g), var(--obs-section-background-b);
    --obs-section-background-alpha: 0.5;
    --obs-section-background-dark-rgb: 25, 25, 25;
    --obs-section-background-dark-alpha: 0.75;
    --obs-section-background-dark-alt-rgb: var(--grey-35-rgb);
    --obs-section-background-dark-alt-alpha: 0.75;
    --obs-section-border-rgb: var(--grey-225-rgb);
    --obs-section-border-alpha: 1;

    /*Options panel. Container, category and part are the three nesting levels*/
    --obs-option-container-border-rgb: 205, 205, 205;
    --obs-option-container-border-alpha: 1;
    --obs-option-category-border-rgb: 185, 185, 185;
    --obs-option-category-border-alpha: 1;
    --obs-option-part-border-rgb: 165, 165, 165;
    --obs-option-part-border-alpha: 1;

    /*Placement grid*/
    --obs-grid-rgb: 175, 175, 175;
    --obs-grid-alpha: .1;

    /*Text: one per heading level, kept apart even where the value matches*/
    --obs-site-title-text-rgb: 255, 255, 255;
    --obs-site-title-text-alpha: 1;
    --obs-title-text-rgb: 255, 255, 255;
    --obs-title-text-alpha: 1;
    --obs-category-title-text-rgb: 255, 255, 255;
    --obs-category-title-text-alpha: 1;
    --obs-subtitle-text-rgb: var(--grey-225-rgb);
    --obs-subtitle-text-alpha: 1;
    --obs-part-title-text-rgb: 255, 255, 255;
    --obs-part-title-text-alpha: 1;
    --obs-body-text-rgb: var(--grey-225-rgb);
    --obs-body-text-alpha: 1;
    --obs-playstyle-title-text: rgba(var(--obs-part-title-text-rgb), var(--obs-part-title-text-alpha));
    --obs-playstyle-title-text-selected: var(--obs-playstyle-title-text);
    --obs-playstyle-title-shadow: none;

    /*Buttons*/
    --obs-button-text-rgb: var(--grey-225-rgb);
    --obs-button-text-alpha: 1;
    --obs-button-text-active-rgb: 200, 175, 255;
    --obs-button-text-active-alpha: 1;
    --obs-button-background-rgb: 122, 122, 122;
    --obs-button-background-alpha: .75;
    --obs-button-sweep-rgb: var(--obs-button-background-rgb);
    --obs-button-sweep-alpha: var(--obs-button-background-alpha);
    --obs-button-glow-rgb: var(--obs-button-background-rgb);

    /*Modal close control*/
    --modal-close-text: #989898;
    --modal-close-text-hover: #c0c0c0;

    /*Inputs*/
    --obs-input-border: #333333;
    --obs-link-button-background-rgb: 50, 50, 50;
    --placement-menu-background-hover: rgba(15, 15, 15, .90);

    /*The killer/survivor switch. Its outer shadow matches its surface, which is the flat look*/
    --obs-switch-background: var(--grey-21);
    --obs-switch-background-hover: #212121;
    --obs-switch-selected-background: #3c3c3c;
    --obs-dropdown-disabled-background: #bfbebe;
    --obs-invalid-button-background: rgb(23, 23, 23);
    --obs-invalid-button-background-hover: rgb(30, 30, 30);

    /*Toggle and save states*/
    --obs-toggle-on-rgb: 97, 255, 48;
    --obs-saved-rgb: 100, 240, 40;
    --obs-toggle-off-background: var(--grey-85);
    --obs-toggle-off-background-hover: #5f5f5f;
    --obs-toggle-off-background-active: var(--grey-136);

    /*The overlay's accent, following the site one rather than repeating the value*/
    --obs-accent-text: var(--accent-color);
    --obs-link-text: #7000a0;

    /*Dark panel buttons: the changelog row and the config section*/
    --obs-panel-button-background: rgba(23, 23, 23, 1);
    --obs-panel-button-background-hover: rgba(30, 30, 30, 1);
    --obs-panel-button-background-active: var(--grey-35);

    /*The about tab strip inside the overlay, on darker chrome*/
    --about-tab-background: #262626;
    --about-tab-border: #373737;

    /*Text selection. The overlay takes mobile's pair, not the desktop one*/
    --text-selection-color: rgba(230, 230, 230, 0.5);
    --text-selection-background: rgba(0, 0, 0, 0.05);

    /*[font-family] vars*/
    --f1-font-family: var(--font-heading);
    --f2-font-family: var(--font-hand);
    --f3-font-family: var(--font-marker);
    --f4-font-family: var(--font-scrawl);
    --f5-font-family: var(--font-script);
}

.AdminTag {
  font-size: var(--font-size-xs);
  letter-spacing: 1px;
  margin: 0;
  height: fit-content;
  font-family: "Times New Roman", Times, serif;
}

.comment_content_html {
  margin: 0;
  padding: 5px 0 5px 0;
}

.comments .comment_header {
  display: flex;
  border-bottom: 1px solid var(--input-border-subtle);
  padding: 15px 0;
  margin-bottom: 10px;
  align-items: center;
}

.comments .comment_header .total {
  color: var(--comment-muted-text);
  font-size: var(--comment-body-font-size);
  flex-grow: 1;
}

.comments .comment_header .write_comment_btn {
  margin: 0;
}

.comments .comment_header form {
  padding-right: 15px;
}

.comments .comment_header form select {
  border: 1px solid var(--input-border-subtle);
  background-color: var(--comment-input-background);
  color: var(--comment-input-text);
  padding: 5px 15px;
  border-radius: var(--radius-sm);
  font-size: var(--comment-body-font-size);
}

.comments .write_comment_btn, .comments .write_comment button {
  display: inline-block;
  background-color: var(--comment-write-background);
  color: var(--dark-button-text);
  text-decoration: none;
  margin: 10px 0 0 0;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--comment-body-font-size);
  font-weight: 600;
  border: 0;
  transition: background-color var(--transition-base);
}

.comments .write_comment_btn:hover, .comments .write_comment button:hover {
  background-color: var(--comment-write-background-hover);
}

.comments .write_comment {
  display: none;
  padding: 20px 0 10px 0;
}

.comments .write_comment textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--comment-input-border);
  background-color: var(--comment-input-background);
  color: var(--comment-input-text);
  border-radius: var(--radius-sm);
  height: 150px;
  margin-top: 10px;
}

.comments .write_comment input {
  display: block;
  width: 250px;
  padding: 10px;
  border: 1px solid var(--comment-input-border);
  background-color: var(--comment-input-background);
  color: var(--comment-input-text);
  border-radius: var(--radius-sm);
}

.comments .write_comment button {
  cursor: pointer;
}

.comments .write_comment textarea::placeholder, .comments .write_comment input::placeholder {
  color: var(--comment-input-placeholder-text);
}

.comments .comment, .comments_acc .comment {
  display: flex;
  flex-flow: column;
  width: 100%;
  padding-top: 10px;
  border-top: 1px var(--divider-border) solid;
}

.comments .comment .img, .comments_acc .comment .img {
  padding-right: 15px;
}

.comments .comment .img img {
  clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
  display:none;
  border-radius: 15%;
}
.comments_acc .comment .img img {
  clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
  border-radius: 15%;
}

input[name="img_url"] {
  display:none;
}

.comments .comment > .con, .comments_acc .comment > .con {
  display: flex;
  flex-flow: column;
  width: 100%;
}

.comments .comment > .con .votes, .comments_acc .comment > .con .votes {
  display: flex;
  flex-flow: column;
  min-width: 40px;
  align-items: center;
}

.comments .comment > .con .votes .up, .comments .comment > .con .votes .down, .comments_acc .comment > .con .votes .up, .comments_acc .comment > .con .votes .down {
  display: flex;
  text-decoration: none;
}

.comments .comment > .con .votes .up span, .comments_acc .comment > .con .votes .up span  {
  transform: rotate(45deg);
}

.comments .comment > .con .votes .down span, .comments_acc .comment > .con .votes .down span {
  transform: rotate(225deg);
}

.comments .comment > .con .name, .comments_acc .comment > .con .name {
  display: inline;
  padding: 0 5px 3px 0;
  margin: 0;
  font-size: var(--comment-name-font-size);
  color: var(--comment-name-text);
}

.comments .comment > .con .date, .comments_acc .comment > .con .date {
  color: var(--comment-date-text);
  font-size: var(--comment-body-font-size);
}

.comments .comment > .con .comment_content, .comments_acc .comment > .con .comment_content {
  display: inline-flex;
  max-width: 100%;
  padding: 5px 0 5px 0;
  margin: 0;
  font-size: var(--comment-body-font-size);
  color: var(--comment-content-text);
}

.comments .comment .comment_footer, .comments_acc .comment .comment_footer {
  display: flex;
  flex-flow: row;
}

.comments .comment .comment_footer a, .comments_acc .comment .comment_footer a {
  display: inline-block;
  text-decoration: none;
  padding: 0 5px;
  height: 7px;
}

.comments .comment .comment_footer a:hover .arrow, .comments_acc .comment .comment_footer a:hover .arrow {
  border: solid var(--comment-control-color-hover);
  border-width: 0 2px 2px 0;
}

.comments .comment .comment_footer .num, .comments_acc .comment .comment_footer .num {
  color: var(--comment-muted-text);
  padding-right: 5px;
  font-size: var(--comment-body-font-size);
}

.comments .comment .comment_footer .arrow, .comments_acc .comment .comment_footer .arrow {
  border: solid var(--comment-control-color);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  transition: border-color var(--transition-base);
}

.comments .comment .comment_footer .arrow.up, .comments_acc .comment .comment_footer .arrow.up {
  transform: translateY(-2px) rotate(-135deg);
}

.comments .comment .comment_footer .arrow.down, .comments_acc .comment .comment_footer .arrow.down {
  transform: translateY(-4px) rotate(45deg);
}

.comments .comment .comment_footer .reply_comment_btn, .comments_acc .comment .comment_footer .reply_comment_btn {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 10px;
  font-size: var(--comment-body-font-size);
  color: var(--comment-muted-text);
  margin-top: 0;
  margin-bottom: 16px;
  transition: color var(--transition-base);
}

.comments .comment .comment_footer .reply_comment_btn:hover, .comments_acc .comment .comment_footer .reply_comment_btn:hover {
  color: var(--comment-reply-text-hover);
}

.comments .show_more_comments {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 10px;
  font-weight: 600;
  color: var(--comment-show-more-text);
  background-color: var(--comment-show-more-background);
  margin: 25px 0;
  font-size: var(--comment-body-font-size);
  transition: background-color var(--transition-base);
}

.comments .show_more_comments:hover {
  background-color: var(--comment-show-more-background-hover);
}

.comments .loader {
  display: inline-block;
  border: 2px solid var(--comment-muted-text);
  border-top: 2px solid var(--input-border-subtle);
  border-radius: var(--radius-round);
  width: 14px;
  height: 14px;
  animation: spin 1s ease infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.comments .replies {
  margin-left: 15px;
}

.Alpha {
    color: var(--AlphaColor) !important;
}

.Ghost {
    color: var(--GhostColor) !important;
}

.comments_wrapper {
  width: 100%;
}

.comments-spacer {
    width: 100%;
}

#comments {
    text-align: left;
    background: var(--dark-input-background);
    padding: 20px 50px;
    width: 100%;
    min-width: 300px;
    max-width: 1000px;
    border-radius: var(--radius-md);
    box-shadow: -4px -4px 15px var(--dark-input-background);
}

/* 0. Base */

* {
    box-sizing: border-box;
    cursor: url(/Images/cur1158.webp), auto !important;
    /*user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;*/
}

html {
    scroll-behavior: smooth;
    overflow-y: scroll;
    overflow-x: hidden;
}

@media screen and (max-width: 998px)
{
    html {
        overflow-y: auto;
        overflow-x: auto;
    }
}

body {
    margin: 0px;
    background-color: var(--site-background);
    background-repeat: no-repeat;
    background-position-y: 30px;
    resize: both;
    color: var(--site-text);
    transition: background-position-y var(--transition-slow);
}

#body {
    animation-delay: 2.5s;
    animation: fadein 2.5s;
    background-attachment: fixed;
    background-size: cover;
}

/* width */
.chrome::-webkit-scrollbar, .chrome ::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.chrome::-webkit-scrollbar-track, .chrome ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--scrollbar-track-shadow);
    border-radius: var(--radius-md);
}

/* Handle */
.chrome::-webkit-scrollbar-thumb, .chrome ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-background);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-base);
}

/* Handle on hover */
.chrome::-webkit-scrollbar-thumb:hover, .chrome ::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-background-hover);
}

/* Handle pressed */
.chrome::-webkit-scrollbar-thumb:active, .chrome ::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-background-active);
}

::selection {
    color: var(--text-selection-color);
    background: var(--text-selection-background);
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes blurIn {
    0% {
        filter: blur(6px);
    }
    100% {
        filter: blur(0px);
    }
}

@keyframes clipin {
    0% {
        clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
    }
    50% {
        clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
    }
    75% {
        clip-path: polygon(35% 35%, 35% 0, 100% 0, 100% 100%, 0 100%, 0 35%);
    }
    100% {
        clip-path: polygon(100% 100%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    }
}

a {
    color: var(--link-text);
    text-decoration: underline;
}

a.link {
    color: rgba(var(--white-rgb), 0.9);
    filter: drop-shadow(0px 0px 2px rgba(var(--white-rgb), .35));
    transition: filter var(--transition-base), color var(--transition-base);
}

a.link:hover {
    color: rgba(var(--white-rgb), 0.9);
    filter: drop-shadow(0px 0px 4px rgba(var(--white-rgb), .75));
}

a.link:active {
    color: rgba(var(--white-rgb), 0.75);
    filter: drop-shadow(0px 0px 3px rgba(var(--white-rgb), .5));
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

h1, h2:not(.toon), h3, h4, h5, h6 {
    color: var(--heading-text);
    text-shadow: var(--heading-text-shadow);
}

p {
    color: var(--body-text);
    text-shadow: var(--body-text-shadow);
}

label {
    color: var(--label-text);
}

div {
    display: inline-block;
}

.icon {
    fill: var(--icon-fill);
}

.selection {
    background: var(--selected-background);
    border-radius: var(--radius-sm);
    border: 2px solid var(--selection-box-border);
    box-shadow: 0px 0px 10px 1px var(--selection-box-border);
    z-index: var(--z-modal);
}

.column5, .column15, .column30, .column40, .column49,
.column50, .column100, .column195, .column245 {
    float: left;
    padding: 10px;
}

.column5 {
    width: 5%;
}

.column15 {
    width: 15.5%;
}

.column30 {
    width: 30%;
}

.column40 {
    width: 40%;
}

.column49 {
    width: 49%;
}

.column50 {
    width: 50%;
}

.column195 {
    width: 19.5%;
}

.column245 {
    width: 24.5%;
}

.row:after {
    content: "";
    clear: both;
}

.full-width {
    width: 100%;
}

.hidden {
    display: none !important;
}

.sticky {
    position: sticky;
    top: 0;
}

.rsticky {
    position: fixed !important;
    top: 70px !important;
    z-index: 10;
}

#config {
    margin: 0;
    height: 0px;
    min-width: 300px;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 165px;
    z-index: 2;
}

#config > div:not(#DisplayChecks) {
    margin-left: 0px !important;
}

.display-options-title {
    margin-top: 0;
}

.game-mode-toggle-wrapper {
    margin-left: 50px;
    margin-top: 20px;
    width: 150px;
}

#config-div {
    margin: auto;
    margin-top: 20px;
    height: 35px;
    width: 100%;
    display: block;
    z-index: 2;
    position: relative;
}

#normal-config {
    margin: auto;
    display: block;
}

#normal-config .beta-tag {
    width: 0;
    bottom: -25px;
    right: 10px;
    transform: rotate(0deg);
}

#nav {
    width: unset;
    min-width: 420px;
    height: 375px;
    margin-bottom: 100px;
    margin-left: 38px;
    z-index: 5;
    position: relative;
}

@media screen and (max-width: 890px)
{
    #nav {
        margin-bottom: 0px;
    }
}

#MainContent {
    width: 100%;
    text-align: center;
    margin: auto;
    margin-top: 0px;
    height: 100%;
    z-index: 1;
    position: relative;
}

@media screen and (min-width: 1440px) {
    #MainContent {
        margin-top: -40px;
    }
}

#MainContent img {
    transition: filter var(--transition-base);
    filter: drop-shadow(0px 0px 10px rgba(var(--black-rgb), 0.5));
}

#MainContent img:hover {
    transition: filter var(--transition-base);
    filter: drop-shadow(0px 0px 10px rgba(var(--black-rgb), 1));
}

#BottomContent {
    width: 100%;
    height: 100%;
    margin: auto;
    margin-top: -60px;
    text-align: center;
    z-index: 0;
    position: relative;
}

.bottom-cover {
    width: 100%;
    height: auto;
    margin-top: 25px;
    padding-bottom: 150px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    position: relative;
    z-index: 0;
}

.seasonal-banner {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    top: 0;
}

.seasonal-banner h2 {
    margin: 0;
}

.seasonal-banner center {
    margin-bottom: 11px;
}

.seasonal-banner p {
    color: var(--seasonal-banner-text);
}

.seasonal-banner .notice-top {
    margin-bottom: 10px;
}

.seasonal-banner .notice-bottom {
    margin-bottom: 4px;
    margin-top: 6px;
}

.seasonal-banner .notice-bottom a {
    color: var(--seasonal-banner-link);
}

#scroll {
    display: none;
}

.mobile-link-teaser {
    display: none;
    position: absolute;
    right: 10px;
    top: 20px;
}

.mobile-link-teaser a {
    text-decoration: none;
}

.feedback-wrap {
    width: 50%;
    min-width: 300px;
}

.subreddit-banner-img {
    width: 400px;
    height: 103px;
}

.credit-line {
    top: 5px;
    position: absolute;
    margin-left: 48px;
    color: var(--credit-line-text);
}

.content-spacer-top {
    position: absolute;
    top: 10px;
    margin-left: 40%;
    margin-right: 40%;
}

#root {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: transparent;
}

#KeepContentSize {
    width: 100%;
}

#LoadoutSpacer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#SurvivorSection, #KillerSection {
    width: 100%;
}

#KillerSection {
    z-index: 0;
}

#SurvChecks {

}

#KillChecks {

}

#AllNoneAnyChecks, #NoneAnyChecks {
    padding-left: 10px;
    padding-right: 10px;
}

#AllNoneAnyChecks {
    padding-right: 0px;
    margin-top: 25px;
    margin-bottom: 5px;
    width: 100%;
    display: inherit;
}

#AllAnyChecks, #AllNoneChecks {
    width: calc(50% - 10px);
}

#NoneAnyChecks {
    margin-bottom: 25px;
    min-width: 315px;
    width: 315px;
}

#SurvivorNoneAnyChecks {
    width: 145px;
}

#KillerNoneAnyChecks {
    width: 132px;
}

.settings-note {
    color: var(--settings-note-text);
    font-size: var(--font-size-sm);
}

.ConfigSepporator {
    width: 100%;
    margin: 0px;
}

.ConfigSepporator h3, .ConfigSepporator h2 {
    width: 100%;
    margin: 0px 0px 10px 0px;
}

.Chkbox {
    display: block;
    filter: drop-shadow(0px 0px 10px var(--shadow-color));
}

/*
.desktop {
    display:block;
}
.mobile {
    display:none;
}
@media screen and (max-width:1650px) {
    .desktop {
        display:none;
    }
    .mobile {
        display:block;
    }
}
*/

.KnownTime, .UpdateTime {
    color: var(--accent-color);
}

.KnownList, .UpdateList {
    text-align: left;
    color: var(--notice-list-text);
    width: 600px;
}

.toons {
    width: 120%;
    margin-left: -10%;
    height: fit-content;
    position: relative;
    z-index: 4;
}

.toon {
    padding: 0px;
    margin: 0px;
    font-family: var(--font-marker);
    font-size: var(--font-size-lg);
    position: relative;
}

.ToonChoice {
    height: 400px;
    width: 210px;
    position: relative;
    left: 0px;
    display: inline-block;
}

.toon-display {
    margin-top: -45px;
    color: var(--card-text);
}

.ToonChoice.offset {
    margin-right: -213px;
}

.ToonCDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.ToonCDiv > div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.toon-section-spacer {
    width: 400px;
}

.survivor-offering-item-wrap {
    width: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px auto 0;
    z-index: 2;
    position: relative;
}

.full-width-spacer {
    width: 100%;
}

.ToonBuildDisplay button {
    font-size: var(--font-size-xs);
    margin-top: 5px;
    padding: 4px 10px;
}

.perks {
    padding-top: 10px;
    width: 900px;
    height: 600px;
    margin-top: 25px;
    /*background-image:url("/Images/PerksImg.webp");*/
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 10px var(--shadow-color));
    position: relative;
    z-index: 3;
    transition-delay: 0s;
    transition-property: z-index;
}

.perks:hover {
    z-index: 4;
    transition-delay: .05s;
    transition-property: z-index;
}

.perks > h1, #KillerOfferings > h1, #SurvivorItems > h1 {
    color: var(--card-heading-text);
    text-shadow: var(--heading-text-shadow);
}

.perks > h1 {
    margin-top: -20px;
}

#SurvivorPerks > h1 {
    margin-right: 60px;
}

.PerkDisplayContainer {
    height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.PerkDisplayContainerRow:first-of-type {
    margin-bottom: -30px;
    margin-top: -30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.PerkDisplayContainerRow:last-of-type {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 25px;
}

.perk {
    /*background-image:url("/Images/PerkImg.webp");*/
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    resize: both;
    padding: 10px;
    padding-top: 30px;
    height: 240px;
    width: 320px;
    margin-left: 40px;
    margin-right: 40px;
    color: var(--card-text);
    font-family: var(--font-scrawl);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.perk > b {
    height: 24px;
    font-size: var(--font-size-lg);
}

.PerkDisplay {
    width: 240px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.PerkDisplayImage {
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    resize: both;
    width: 90px;
    height: 90px;
}

.outline {
    text-shadow: -0.5px -0.5px 0 var(--shadow-color), 0.5px -0.5px 0 var(--shadow-color), -0.5px 0.5px 0 var(--shadow-color), 0.5px 0.5px 0 var(--shadow-color);
    letter-spacing: 1px;
}

#SurvivorOfferings {
    position: relative;
    z-index: 1;
    transition-delay: .5s;
    transition-property: z-index;
}

#SurvivorOfferings:hover {
    z-index: 2;
    transition-delay: 0s;
    transition-property: z-index;
}

#SurvivorOfferings > h1 {
    margin-bottom: 5px;
    color: var(--card-heading-text);
    text-shadow: var(--heading-text-shadow);
    /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
    letter-spacing: 1px;
}

#KillerOfferings {
    padding-top: 75px;
    height: 500px;
    width: 100%;
    margin-top: -10px;
    filter: drop-shadow(0px 0px 10px var(--shadow-color));
}

.offerings {
    width: 50%;
    height: 300px;
    padding-top: 10px;
    /*background-image:url("/Images/OfferingImg.webp");*/
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    font-family: var(--font-hand);
    filter: drop-shadow(0px 0px 10px var(--shadow-color));
    position: relative;
    z-index: 2;
}

.items {
    color: var(--card-text);
    width: 50%;
    height: 300px;
    /*background-image:url("/Images/ItemImg.webp");*/
    background-size: contain;
    background-repeat: no-repeat;
    font-family: var(--font-hand);
    filter: drop-shadow(0px 0px 10px var(--shadow-color));
    position: relative;
}

#SurvivorItems {
    position: relative;
    z-index: 1;
}

#SurvivorItems > h1 {
    margin-top: 10px;
    margin-bottom: 15px;
}

#SurvivorItems:hover {
    z-index: 2;
}

.addons {
    width: 800px;
    min-height: 300px;
    position: relative;
    z-index: 1;
    margin-bottom: 25px;
}

.addons:hover {
    z-index: 5;
}

#SurvivorAddOns {
    height: 100%;
}

#SurvivorAddons .itemtab,
#KillerAddons .itemtab {
    width: 100%;
}

#SurvivorAddons .itemtab > div {
    display: flex;
    justify-content: center;
    width: 100%;
}

#KillerAddons .itemtab > div {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 2px;
}

.addon {
    font-family: var(--font-brush);
    font-size: var(--addon-font-size);
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.addon span.addonImage {
    display: flex;
    justify-content: center;
    margin: 0 5px;
    width: 50px;
    height: 50px;
}

.addon > span > span.none_rarity, .perk .PerkDisplay .none_rarity,
.offerings .offering .none_rarity, .items .item .none_rarity {
    color: var(--card-text) !important;
}

.Itemtabcontent .addon > span > span,
.Killertabcontent .addon > span > span {
    text-shadow: 0 0 3px var(--shadow-color), 0 0 3px var(--shadow-color);
}

/* Style the tab content */
.Itemtabcontent {
    display: none;
    padding: 10px;
    border: 0px solid transparent;
    border-top-color: transparent;
    border-top-style: solid;
    border-top-width: 10px;
    border-top: none;
    background: linear-gradient(to right, transparent, var(--item-tab-divider), transparent);
    color: var(--card-text);
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
    margin-top: 5px;
    filter: drop-shadow(0px 0px 10px var(--shadow-color));
}

.Itemtabcontent > div,
.Killertabcontent > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.Itemtabcontent > div > h3 {
    margin-top: -20px;
}

.Itemtabcontent > div > div,
.Killertabcontent > div > div {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.Killertabcontent > div > div.addonTitles {
    align-items: center;
}

.addonTitles h3 {
    margin-top: -20px;
    margin-bottom: 0;
}

.addonTitles h5 {
    margin-top: 0;
}

.addon-tab-close {
    margin-left: 99%;
    color: var(--site-text);
    cursor: default;
}

#Cover {
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    resize: both;
    height: 100%;
    margin-top: 25px;
    position: relative;
    z-index: 0;
}

#SurvivorImageDisplay, #KillerImageDisplay {
    /*background-image:url("/Images/ImgCover.webp");*/
    background-size: cover;
    text-align: center;
    padding: 10px;
    padding-top: 50px;
    height: 306px;
    width: 209px;
    filter: drop-shadow(0px 0px 10px var(--shadow-color));
}

#SurvivorImageDisplay img, #KillerImageDisplay img {
    width: 190px;
    height: 210px;
}

#SurvivorAnyDisplay, #KillerAnyDisplay {
    position: absolute;
    top: 107px;
    left: 20px;
    color: var(--anynone-display-text);
    text-shadow: var(--anynone-display-shadow);
    font-family: var(--font-marker);
}

#SurvivorPerkAnyDisplay, #KillerPerkAnyDisplay,
#SurvivorPerkNoneDisplay, #KillerPerkNoneDisplay,
#SurvivorAddonAnyDisplay, #KillerAddonAnyDisplay,
#SurvivorAddonNoneDisplay, #KillerAddonNoneDisplay,
#SurvivorOfferingAnyDisplay, #SurvivorOfferingNoneDisplay,
#KillerOfferingAnyDisplay, #KillerOfferingNoneDisplay,
#SurvivorItemAnyDisplay, #SurvivorItemNoneDisplay {
    position: relative;
    width: 30px;
    color: var(--anynone-display-text);
    text-shadow: var(--anynone-display-shadow);
    font-family: var(--font-marker);
}

#SurvivorAddonAnyDisplay, #KillerAddonAnyDisplay,
#SurvivorAddonNoneDisplay, #KillerAddonNoneDisplay {
    color: var(--anynone-display-dark-text);
}

#SurvivorPerkAnyDisplay, #KillerPerkAnyDisplay {
    top: 16px;
    left: -220px;
}

#SurvivorPerkNoneDisplay, #KillerPerkNoneDisplay {
    top: 16px;
    left: 225px;
}

#SurvivorAddonAnyDisplay, #KillerAddonAnyDisplay {
    top: 70px;
    left: -250px;
}

#SurvivorAddonNoneDisplay, #KillerAddonNoneDisplay {
    top: 70px;
    left: 250px;
}

#SurvivorOfferingAnyDisplay {
    top: 30px;
    left: -70px;
}

#SurvivorOfferingNoneDisplay {
    top: 30px;
    left: 10px;
}

#KillerOfferingAnyDisplay {
    top: 0;
    left: -175px;
}

#KillerOfferingNoneDisplay {
    top: 0;
    left: 90px;
}

#SurvivorItemAnyDisplay {
    top: 10px;
    left: -70px;
}

#SurvivorItemNoneDisplay {
    top: 10px;
    left: 45px;
}

.WinConds {
    height: 327px;
    width: 400px;
    position: relative;
    /*margin-top: 100px;
    margin-left: -500px;*/
    padding-top: 125px;
    color: var(--card-text);
    background-image: url("/Images/WinCondImg.webp");
    background-size: contain;
    text-align: center;
    background-repeat: no-repeat;
    font-family: var(--font-script);
    z-index: 1;
    filter: drop-shadow(0px 0px 10px var(--shadow-color));
}

.WinConds p {
    color: var(--wincond-text);
    text-shadow: var(--wincond-text-shadow);
}

.WinCond {
    transition: text-shadow var(--transition-base);
    text-shadow: 0 0 0px var(--shadow-color);
}

.WinCond:hover {
    text-shadow: 0 0 2px var(--shadow-color);
}

.ToonWinCondDiv {
    display: block;
    padding-top: 73px;
    width: 400px;
}

.ToonWinCondDiv .tooltip {
    margin-left: -55px;
    padding-left: 55px;
}

.ToonWinCondDiv .tooltip-class {
    margin-bottom: 0;
}

.ToonWinCondDiv .tooltip-class.wincond-rating {
    display: inline-block;
    margin-top: -10px;
}

.ToonWinCondDiv .wincond-rating-count {
    font-size: var(--meta-font-size);
}

#SurvivorWinCondDisplay, #KillerWinCondDisplay {
    margin-left: -55px;
    /*margin-top: -60px;*/
    width: 290px;
    transform: rotate(5deg);
}

#SurvivorWinCondDisplayWC > p {
    margin: 6px;
}

.WinCondVoteDiv {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 25px;
    bottom: 40px;
    width: 50px;
    transform: rotate(-7deg);
}

.WinCondVoteRating {
    font-size: var(--font-size-xs);
    margin-left: 5px;
    margin-bottom: -5px;
}

.WinCondVoteCount {
    font-size: var(--font-size-xs);
}

.WinCondVoteTextDiv {
    margin: -10px 0 0;
    padding: 0;
    line-height: 10px;
}

.WinCondVoteText {
    font-size: var(--note-font-size);
}

.WinCondVoteBtns {
    margin-top: -14px;
}

.WinCondVote {
    text-decoration: none;
}

.WinCondVoteBtns .arrow {
    display: inline-block;
    padding: 2px;
    border: solid var(--vote-arrow-border);
    border-width: 0 2px 2px 0;
    transition: all var(--transition-base);
}

.WinCondVoteBtns .arrow.up {
    transform: translateY(-2px) rotate(-135deg);
}

.WinCondVoteBtns .arrow.down {
    transform: translateY(-4px) rotate(45deg);
}

.WinCondVoteBtns .WinCondVote.voted .arrow.up {
    border-color: var(--good-color);
}

.WinCondVoteBtns .WinCondVote.voted .arrow.down {
    border-color: var(--bad-color);
}

.WinCondVoteBtns .WinCondVote:hover .arrow.up {
    border-color: var(--good-color);
    padding: 4px;
}

.WinCondVoteBtns .WinCondVote:hover .arrow.down {
    border-color: var(--bad-color);
    padding: 4px;
}

.WinCondVoteBtns .WinCondVote.disabled:hover .arrow.up,
.WinCondVoteBtns .WinCondVote.disabled:hover .arrow.down {
    border-color: var(--vote-arrow-border);
    padding: 2px;
}

.WinCondVoteBtns .WinCondVote.disabled.voted:hover .arrow.up,
.WinCondVoteBtns .WinCondVote.disabled.voted:hover .arrow.down {
    filter: brightness(1.4);
    padding: 2px;
}

.Ratings {
    height: 250px;
    width: 300px;
    position: absolute;
    margin-top: -250px;
    padding-top: -125px;
    margin-left: 250px;
    color: var(--card-text);
    /* background-image:url("/Images/Rating.webp"); */
    background-size: contain;
    text-align: center;
    background-repeat: no-repeat;
}

.ToonInfoDiv {
    width: 400px;
    margin-right: -404px;
    padding: 0 0 0 20px;
    margin-bottom: 15px;
    position: relative;
    top: 0px;
    margin-top: 23px;
    margin-left: 213px;
    display: none;
}

.ToonInfoDiv > div, .ToonInfoFieldSet {
    width: 100%;
    display: none;
}

.ToonInfoFieldSet fieldset {
    border-radius: var(--radius-lg);
    background-color: var(--fieldset-background);
    padding-bottom: 25px;
}

.ToonInfoFieldSet legend {
    margin-left: 130px;
    font-size: var(--font-size-lg);
    font-family: var(--font-heading);
}

.ToonInfoFieldSet h3 {
    margin: 0px;
    font-size: var(--font-size-lg);
}

.ToonInfoFieldSet p {
    margin: 5px 0px;
    font-family: var(--font-hand);
}

.Rating .ToonInfoFieldSet legend {
    margin-left: 125px;
}

.Rating .ToonInfoFieldSet fieldset {
    padding-bottom: 0px;
}

.HasRating .ToonRatingNumber {
    margin: 5px 0px 10px 0px;
}

div.stars {
    width: 270px;
    display: inline-block;
}

input.star {
    display: none;
}

label.star {
    padding: 5px;
    font-size: var(--star-font-size);
    color: var(--star-empty);
    transition: all .2s;
}

label.star:before {
    --star-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round' d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187z'/%3E%3C/svg%3E");
    --star-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187z'/%3E%3C/svg%3E");
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.1em;
    background-color: currentColor;
    -webkit-mask: var(--star-outline) center / contain no-repeat;
    mask: var(--star-outline) center / contain no-repeat;
}

.HasRating label.star {
    pointer-events: none;
}

input.star:checked ~ label.star:before {
    /*content: '\f005';*/
    color: var(--star-checked);
    transition: all var(--transition-fast);
    -webkit-mask-image: var(--star-filled);
    mask-image: var(--star-filled);
}

input.star-1:checked ~ label.star:before {
    color: var(--star-1);
}

input.star-3:checked ~ label.star:before {
    color: var(--star-3);
    /*text-shadow: 0 0 20px #43b247;*/
    filter: drop-shadow(0 0 10px var(--star-3-glow));
}

input.star-4:checked ~ label.star:before {
    color: var(--star-4);
    /*text-shadow: 0 0 20px #b243ac;*/
    filter: drop-shadow(0 0 10px var(--star-4-glow));
}

input.star-5:checked ~ label.star:before {
    color: var(--star-5);
    /*text-shadow: 0 0 20px #b24343;*/
    filter: drop-shadow(0 0 10px var(--star-5-glow));
}

.HasRating input.star:not(:checked) ~ label.star {
    display: none;
}

.HasRating input.star:checked ~ label.star {
    display: inline-block;
}

.RatingResponse {
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: space-evenly;
    width: 150px;
    height: 45px;
}

.RRlinks {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 17px;
}

.RRlinks a.great, .RRlinks a.normal, .RRlinks a.check {
    width: 15px;
}

.RRlinks a.check {
    transform: rotate(0deg);
    margin: 0 5px;
}

.RRlinks a svg {
    width: 100%;
    fill: var(--icon-color);
    height: 17px;
    transition: all var(--transition-base);
}

.RRlinks a.vote-up, .RRlinks a.vote-great-up {
    transform: rotate(270deg);
}

.RRlinks a.vote-down, .RRlinks a.vote-great-down {
    transform: rotate(90deg);
}

.RRlinks a svg:hover, .RRlinks a.check:hover {
    transform: scale(1.3);
}


.tooltip, .tooltip-left {
    position: relative;
    display: inline-block;
}

.perk .tooltip, .perk .tooltip-left {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}

.tooltip .tooltiptext, .tooltip-left .tooltiptext-left {
    visibility: hidden;
    width: 600px;
    background-color: var(--tooltip-background);
    color: var(--tooltip-text);
    text-align: center;
    border-radius: var(--radius-md);
    border: solid 5px var(--tooltip-border);
    padding: 5px 20px 5px 20px;
    position: absolute;
    /*bottom: -100%;*/
    top: -100px;
    margin-left: -60px;
    opacity: 0;
    transition: all var(--transition-base);
    box-shadow: 0px 0px 30px 5px var(--shadow-color);
    z-index: 5;
    filter: blur(6px);
    transition-delay: 0s;
}

.tooltip .tooltiptext {
    height: auto;
    left: 125%;
}

.tooltip-left .tooltiptext-left {
    right: 100%;
}

.tooltip:hover .tooltiptext, .tooltip-left:hover .tooltiptext-left {
    visibility: visible;
    opacity: 0.9;
    transition: all var(--transition-slow) .33s;
    filter: blur(0px);
}

.tooltip.no-show:hover .tooltiptext, .tooltip-left.no-show:hover .tooltiptext-left {
    visibility: hidden;
    opacity: 0;
}

.wincond-tooltip.tooltiptext {
    left: 90%;
    padding-bottom: 25px;
}

.wincond-tooltip .tooltip-listItem {
    width: 45%;
    display: inline-block;
    margin: 1.5%;
}

.tooltip-header {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    margin: 0 0 0.67em;
}

.tooltip-header.accent-color {
    color: var(--tooltip-accent-text);
}

.tooltip-class {
    margin-top: -20px;
    font-size: var(--tooltip-body-font-size);
    font-family: var(--font-hand);
}

.tooltip-chapter {
    margin-top: -20px;
    margin-bottom: 30px;
    font-family: var(--font-hand);
    font-size: var(--font-size-md);
}

.tooltip-chapter a {
    color: var(--link-text);
}

.tooltip-desc {
    color: var(--tooltip-description-text);
    font-size: var(--tooltip-body-font-size);
    font-family: var(--font-hand);
    width: 100%;
    max-height: 400px;
    overflow: auto;
    box-shadow: 0px 0px 10px 0px var(--tooltip-description-shadow);
    border-radius: var(--radius-lg);
    padding: 15px;
    text-align: left;

    &:empty {
        display: none;
    }
}

.tooltip-desc.perkdesc {
    font-size: var(--font-size-md);
}

.tooltip-desc.light-color {
    color: lightgray;
}

#SurvivorItems .tooltip-class {
    color: var(--tooltip-text);
    font-size: var(--font-size-xs);
}

.tooltip-desc:empty, .TooltipKillerPowerDesc:empty {
    box-shadow: 0px 0px 10px 0px transparent;
    padding: 0px;
    margin: 0;
}

.tooltip-desc > p, .TooltipKillerPowerDesc > p {
    margin: 10px 0;
}

.tooltip-desc > p:first-of-type, .TooltipKillerPowerDesc > p:first-of-type {
    margin-top: 0;
}

.tooltip-desc > p:last-of-type, .TooltipKillerPowerDesc > p:last-of-type {
    margin-bottom: 0;
}

.TooltipKillerPowerDesc > h5 + p, .TooltipKillerPowerDesc > h6 + p {
    margin-top: 0;
}

.tooltip-desc > ul, .TooltipKillerPowerDesc > ul {
    padding-left: 25px;
    margin: 12px 0;
}

.tooltip-desc > h5, .TooltipKillerPowerDesc > h5 {
    font-size: var(--font-size-sm);
    margin: 0;
}

.tooltip-desc > h6, .TooltipKillerPowerDesc > h6 {
    font-size: var(--font-size-xs);
    margin: 0;
}

.TooltipKillerPowerDesc {
    float: right;
    width: 430px;
    overflow: auto;
    font-size: var(--tooltip-body-font-size);
    height: 167px;
    box-shadow: 0px 0px 10px 0px var(--tooltip-description-shadow);
    border-radius: var(--radius-lg);
    padding: 15px;
    margin-bottom: 20px;
    text-align: left;
}

.TooltipDescHeader {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: first baseline;
    gap: 10px;

    & > h5 {
        font-size: var(--font-size-sm);
        margin: 0;
    }

    & > h6 {
        font-family: var(--font-script);
        font-size: var(--font-size-xs);
        margin: 0;
    }
}

#TooltipKillerPower {
    height: 233px;
    width: 100%;
    font-family: var(--font-hand);
}

#TooltipPowerImage {
    float: left;
}

.toon-power-quote-wrap {
    width: 100%;
}

#TooltipKillerWCListMainDiv {
    display: none !important;
}

.tooltip-DescTitle:empty, .tooltip-listDiv:empty {
    display: none;
}

.tooltip-list {
    font-size: var(--tooltip-body-font-size);
    margin-left: -45px;
    text-align: center;
    width: 600px;
    font-family: var(--font-hand);
    list-style: none;
}

.toons .tooltip-list {
    width: 90%;
    margin: auto;
    padding-left: 0;
    text-align: left;
}

.toons .tooltip-list .tooltip-listItem ul {
    padding-left: 20px;
}

.tooltip-listItem img {
    width: 100%;
}

.tooltip-listItem-sub > h4 {
    margin: 0;
}

.tooltip-quote {
    font-size: var(--font-size-xs);
    color: var(--tooltip-quote-text);
    font-family: var(--font-script);

    &:empty {
        display: none;
    }
}

.tooltip-quote.quote-large {
    font-size: var(--font-size-sm);
}

.Tooltip-video {
    height: 300px;
}

.Tooltip-text {
    margin: 16px 0;
}

.tooltip .cy, .tooltip .cg, .tooltip .cp,
.tooltip .cr, .tooltip .co, .tooltip .cw {
    font-weight: bold;
}

.tooltip .cy {
    color: var(--accent-color);
}

.tooltip .cg {
    color: var(--good-color);
}

.tooltip .cp {
    color: var(--tooltip-accent-text);
}

.tooltip .cr {
    color: var(--bad-color);
}

.tooltip .co {
    color: var(--warn-color);
}

.tooltip .cw {
    color: var(--tooltip-text);
}

.tooltiptext, .tooltiptext-left {
    & .tooltip-retired-div, & .tooltip-killswitched-div {
        position: fixed;
        top: 0;
        left: 0;
        text-align: center;
        width: 100%;
        z-index: var(--z-top);
        border-top-left-radius: var(--radius-sm);
        border-top-right-radius: var(--radius-sm);
        line-height: 16px;
        padding: 2px 10px 5px 10px;
        font-family: var(--font-hand);

        & > .tooltip-retired-at, & > .tooltip-killswitched-at {
            font-size: var(--font-size-sm);
            line-height: 1;
        }

        &:empty {
            display: none;
        }
    }

    & .tooltip-retired-div {
        background: var(--retired-banner-background);
    }

    & .tooltip-killswitched-div {
        background: var(--killswitched-banner-background);
    }

    & .tooltip-activity {
        font-size: var(--tooltip-body-font-size);
        line-height: 16px;
        display: flex;
        justify-content: center;
        gap: 2px;
        flex-direction: row;
        align-items: center;
        font-family: var(--font-hand);

        & .tooltip-activity-added {
            color: rgba(var(--white-rgb), 0.75);
        }
        & .tooltip-activity-updated {
            color: rgba(var(--white-rgb), 0.66);
        }
    }
}

.tippy-content {
    padding: 5px;
    transition-property: filter;
    transition-duration: .33s;
    transition-timing-function: ease-in-out;
}

.tippy-content h4 {
    margin: 8px 0 6px 0;
}

.tippy-content p {
    margin: 12px 0 0;
}

.tippy-box p {
    font-family: var(--font-hand);
    margin: 8px 0;
}

.tippy-box[data-placement^="top"] > .tippy-arrow::before {
    bottom: -12px;
}

.tippy-arrow::before {
    color: rgba(var(--tooltip-background-rgb), 0.95);
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    min-width: 1000px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(var(--black-rgb), 0.4); /* Black w/ opacity */
    animation: fadeEffect 1s;
    backdrop-filter: blur(3px);
}

/* Modal Content/Box */
.modal-content {
    background-color: var(--modal-background);
    position: relative;
    color: var(--site-text);
    margin: 5% 10%;
    padding: 20px;
    border: 1px solid var(--modal-border);
    width: 80%; /* Could be more or less, depending on screen size */
    border-radius: var(--radius-lg);
    box-shadow: 0px 0px 30px 0px var(--shadow-color), inset 0 0 5px 1px var(--modal-border);
}

#LoadoutOverridesModalCore .modal-content {
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
    margin: 5% 0;
}

/* The Close Button */
.close, .close_R {
    color: var(--modal-close-text);
    float: right;
    font-size: var(--modal-close-font-size);
    font-weight: bold;
    z-index: var(--z-raised);
}

.close {
    position: absolute;
    height: 0;
    top: 2px;
    right: 11px;
}

.close_R {
    position: relative;
}

.close:hover, .close:focus,
.close_R:hover, .close_R:focus {
    color: var(--modal-close-text-hover);
    text-decoration: none;
}

#SettingsCore {
    background-color: var(--settings-button-background);
    border: 1px solid var(--site-border);
    border-radius: var(--radius-xl);
    box-shadow: -5px -1px 20px 5px var(--shadow-color);
    z-index: 1;
    position: relative;
    transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

#SettingsCore:hover {
    background-color: var(--settings-button-background-hover);
    border-color: var(--input-border);
}

#SettingsCore:active,
#SettingsCore:active:hover {
    background-color: var(--settings-button-background-active);
    box-shadow: -5px -1px 0px 0px var(--shadow-color);
}

#SettingsCore h2 {
    color: var(--settings-button-text);
    margin: 5px 15px;
}

#SettingsWidgetDiv {
    position: fixed;
    bottom: 10px;
    left: 10px;
    text-align: center;
    z-index: 10;
}

#ModalSettingsCore {
    & h4 {
        margin: 12px 0 8px 0;
    }

    & h2 {
        text-align: center;
    }

    & .modal-content {
        min-width: 1222px;
    }
}

.settings-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.settings-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.setting-anynone {
    font-size: var(--font-size-sm);
}

.setting-theme-override {
    min-width: 226px;
}

.setting-spaced-top {
    margin-top: 6px;
}

.setting-centered {
    text-align: center;
}

.setting-section {
    align-items: center;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--site-border);
    border-radius: var(--radius-md);
    margin: 10px;
    padding: 5px 5px 20px 5px;
    background-color: var(--panel-inset-background);
    box-shadow: 0 0 5px 1px rgba(var(--black-rgb), 0.75), inset 0 0 5px 1px var(--section-shadow-light);
}

.setting-section.filter {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.setting-section.filter > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /*justify-content: space-evenly;*/
    /*align-items: center;*/
}

.setting-section.filter .PlaystyleFilterOption {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--site-border);
    border-radius: var(--radius-lg);
    max-width: 360px;
    margin: 3px;
    justify-content: center;
    padding: 0 5px 5px;
    user-select: none;
    transition: all var(--transition-base);
    box-shadow: 0 0 5px 1px rgba(var(--white-rgb), .25), inset 0 0 5px 1px rgba(var(--black-rgb), .25);
}

.setting-section.filter .PlaystyleFilterOption:hover {
    box-shadow: 0 0 5px 1px rgba(var(--white-rgb), .5), inset 0 0 5px 1px rgba(var(--black-rgb), .5);
}

.setting-section.filter .PlaystyleFilterOption.selected {
    border-color: var(--selected-border);
    background-color: var(--selected-background);
    box-shadow: 0 0 5px 1px var(--selected-shadow), inset 0 0 5px 1px var(--selected-shadow-inset);
}

.setting-section.filter .PlaystyleFilterOption.selected:hover {
    box-shadow: 0 0 5px 1px var(--selected-shadow-hover), inset 0 0 5px 1px var(--selected-shadow-inset-hover);
}

.setting-section.filter .PlaystyleFilterOption img {
    filter: drop-shadow(0px 0px 1px var(--shadow-color));
}

.PlaystyleFilterOption .hybrid {
    margin-bottom: 4px;
    margin-top: 16px;
}

.PlaystyleFilterOption .hybrid.subname {
    margin-top: 0px;
}

.PlaystyleFilterOption p:not(.hybrid) {
    margin-bottom: 26px;
}

.PlaystyleFilterOption ul {
    padding: 0;
    margin: auto;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.PlaystyleFilterOption ul li {
    width: 38px;
    height: 41px;
    display: inline-block;
    margin: 3px 1px;
}

.OptionsFilterNotif {
    display: none;
    margin-bottom: 10px;
    margin-top: 0px;
}

#SiteOption_Saving_Loadout {
    display: flex;
    flex-direction: column;

    & > h4 {
        margin: 0;
        text-align: center;
        font-size: var(--font-size-xs);
    }

    & > div {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 0 10px;

        & > div {
            &#SiteOption_Saving_Loadout_Manual {
                position: relative;
                width: 100%;
                text-align: center;
                margin-top: 10px;

                &:after {
                    content: '';
                    position: absolute;
                    bottom: -14px;
                    left: 0;
                    width: 100%;
                    height: max-content;
                    font-size: var(--font-size-xs);
                    z-index: 2;
                    font-family: var(--font-marker);
                    letter-spacing: .5px;
                    opacity: 0;
                    transition: opacity var(--transition-base);
                }
                &.disabled:after {
                    opacity: 1;
                    content: 'Blocked!';
                    color: var(--rando-button-disabled-text);
                }
                &.disabled.randomizing:after {
                    content: 'Randomizing!';
                    color: var(--rando-button-randomizing-text);
                }
                &.disabled.saved:after {
                    content: 'Already Saved!';
                    color: var(--rando-button-saved-text);
                }
                &.disabled.manual-saved:after {
                    content: 'Saved!';
                    color: var(--rando-button-saved-text);
                }
            }
            &#SiteOption_Saving_Loadout_Group, &#SiteOption_Saving_Loadout_Config_Group {
                & > h6 {
                    font-size: var(--font-size-xxs);
                    margin: 10px 0 5px 0;
                }
                & > div {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 5px;
                }
            }
        }
    }
}

#SiteOption_Loadout_Options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    & > h4 {
        margin: 18px 0 8px 0;
    }

    & > div {
        display: flex;
        flex-direction: column;
        gap: 4px;
        text-align: left;

        & .numberinput {
            position: relative;
            margin: auto;

            & input {
                height: 20px;
                line-height: 1.65;
                float: left;
                display: block;
                margin: 0;
                padding: 3px 4px 3px 4px;
                width: 20px;
                min-width: 35px;
                background: transparent;
                color: var(--input-text);
                border: 1px solid var(--input-border-subtle);
                border-right: none var(--input-border-subtle);
                &[type=number] {
                    -moz-appearance: textfield;
                    &::-webkit-inner-spin-button,
                    &::-webkit-outer-spin-button {
                        -webkit-appearance: none;
                        margin: 0;
                    }
                }
                &:focus {
                    outline: 0;
                }
            }
            & .quantity-nav {
                display: flex;
                flex-direction: row;
                height: 20px;
                width: 28px;
                border: 1px solid var(--site-border);

                & .quantity-button {
                    width: 16px;
                    position: relative;
                    text-align: center;
                    color: var(--quantity-button-text);
                    font-size: var(--font-size-sm);
                    font-family: "Trebuchet MS", Helvetica, sans-serif;
                    line-height: 18px;
                    background-color: transparent;
                    transition: background-color var(--transition-base);

                    &:hover {
                        background-color: rgba(var(--black-rgb), .25);
                    }

                    &.quantity-up {
                        border-right: 1px solid var(--input-border-subtle);
                    }
                }
            }
        }
        & label {
            font-size: var(--font-size-sm);
        }
    }
}

.numberinput {
    position: relative;
    margin: auto;

    & input {
        height: 20px;
        line-height: 1.65;
        float: left;
        display: block;
        margin: 0;
        padding: 3px 4px 3px 4px;
        width: 20px;
        min-width: 35px;
        background: transparent;
        color: var(--input-text);
        border: 1px solid var(--input-border-subtle);
        border-right: none var(--input-border-subtle);
        &[type=number] {
            -moz-appearance: textfield;
            &::-webkit-inner-spin-button,
            &::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        }
        &:focus {
            outline: 0;
        }
    }
    & .quantity-nav {
        display: flex;
        flex-direction: row;
        height: 20px;
        width: 28px;
        border: 1px solid var(--site-border);

        & .quantity-button {
            width: 16px;
            position: relative;
            text-align: center;
            color: var(--quantity-button-text);
            font-size: var(--font-size-sm);
            font-family: "Trebuchet MS", Helvetica, sans-serif;
            line-height: 18px;
            background-color: transparent;
            transition: background-color var(--transition-base);

            &:hover {
                background-color: rgba(var(--black-rgb), .25);
            }

            &.quantity-up {
                border-right: 1px solid var(--input-border-subtle);
            }
        }
    }
}

#SiteOption_Manage_Overrides {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    margin: 20px 0 12px 0;
}

#SiteOption_Display_IRS > h4 {
    margin: 8px 0 4px 0;
}

#SiteOption_Display_IRS > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#CompactModeChkBox, #RarityColorAltsChkBox {
    margin-bottom: 7px;
}

#ImageSetSelectDiv, #ThemeOverrideSelectDiv {
    /*width: 200px;*/
    text-align: center;
    z-index: var(--z-raised);
}

#SiteOptionTooltip_Loadout {
    display: flex;
    flex-direction: column;
}

#SiteOptionTooltip_Loadout_Config_ChkBox, #SiteOptionTooltip_Loadout_Main_ChkBox {
    margin-top: 6px;
}

#ImageSetSelectDiv > div, #ThemeOverrideSelectDiv > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
}

.dd .ddTitle .ddlabel {
    color: var(--dropdown-item-text);
}

#ImageSetSelectDiv > div > label, #ThemeOverrideSelectDiv > div > label {
    font-family: var(--font-heading);
    /*margin: 12px 0 8px 0;*/
    margin: 8px 0 4px 0;
    user-select: text;
    color: var(--heading-text);
}

.desktop #login_form #forgot_passwordDiv {
    bottom: unset;
}

#account_buttons_sub_list {
    text-align: left;
}

#HeaderNavAuthUsername {
    max-width: 300px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}

#FaceplantSubreddit > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    color: var(--subreddit-link-text);
}

body > aside {
    height: 30px;
    position: fixed;
    background: var(--aside-background);
    box-shadow: 0px 0px 10px 10px var(--shadow-color);
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: var(--z-raised);
    width: 100%;
    transition: var(--transition-slow);
    top: 0;
}

body > main {
    position: relative;
    top: 42px;
    transition: top var(--transition-slow);
}

body.aside-collapsed {
    background-position-y: 0px;
}

body.aside-collapsed > aside {
    top: -35px;
}

body.aside-collapsed > main {
    top: 5px;
}

body.aside-collapsed .rsticky {
    top: 30px !important;
}

body > aside svg.aside-arrow {
    width: 15px;
    height: 15px;
    bottom: -15px;
    color: var(--icon-color);
    position: absolute;
    /*transition: var(--transition-modal);*/
    transition: var(--transition-slow);
}

body > aside svg.aside-arrow polyline {
    stroke: currentColor;
}

body > aside svg.aside-arrow:hover {
    width: 20px;
    height: 20px;
    bottom: -20px;
    /*fill: lightgray;*/
}

body.aside-collapsed > aside svg.aside-arrow {
    transform: rotate(180deg);
    bottom: -15px;
}

body.aside-collapsed > aside svg.aside-arrow:hover {
    transform: rotate(180deg);
    bottom: -20px;
    /*fill: lightgrey;*/
}

.t500eio {
    transition: top var(--transition-slow) !important;
}

body > aside > main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 0px;
    margin: 0px;
    font-family: var(--font-ui);
    perspective: 700px;

    & * {
        box-sizing: border-box;
        transform-style: preserve-3d;
    }

    & > div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    & > div.spacer {
        flex: 1;
    }

    & > nav.utility {
        display: flex;
        justify-content: flex-start;
        flex: 8;
    }

    & > nav.support {
        display: flex;
        justify-content: center;
        flex: 3;
    }

    & > nav.auth {
        display: flex;
        justify-content: flex-end;
        flex: 8;
    }

    & a {
        color: var(--link-text);
        transition: top var(--transition-slow);
        cursor: pointer;
    }

    & a:hover {
        color: lightgrey;
    }

    & > .menu {
        background: var(--nav-background);
        margin: -1px;

        & ol {
            width: max-content;
            display: flex;
            justify-content: space-around;
            padding: 0px;
            margin: 0px;
            transition: all var(--transition-menu);
        }

        & ol li {
            display: inline-block;
            padding: 5px 20px;
            flex-grow: 1;
            text-align: center;
            position: relative;
            transition: all var(--transition-menu);
            transition-delay: 0s;
        }

        & ol li:first-of-type {
            margin: 0 -1px;
        }

        & ol li a {
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 900;
        }

        & ol li:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            transition: all var(--transition-menu);
            transform: translateY(-200%) rotate(-5deg);
            background: var(--nav-item-color);
        }

        & ol li:nth-of-type(1):before {
            opacity: 0;
        }

        & ol li:hover a {
            color: var(--link-text);
        }

        & ol li:hover ol li a {
            color: var(--link-text);
        }

        & ol li:hover:before {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
        }

        & ol li:hover ol:before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            display: block;
            bottom: -30px;
            left: -15px;
            transform: rotate(45deg) scale(0.5);
            background-repeat: no-repeat;
            animation: clipin 0.4s ease-in 1 forwards;
            animation-delay: 0.2s;
            clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
        }

        & ol li:hover li {
            position: relative;
        }

        & ol li:hover li:before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            display: block;
            right: -30px;
            top: -15px;
            left: auto;
            transform: rotate(-45deg) scale(0.5);
            border: 3px solid red;
            border-color: red transparent transparent red;
            background: black;
            animation: clipin 0.4s ease-in 1 forwards;
            clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
        }

        & ol li:hover li:first-of-type:before {
            display: none;
        }

        & ol li ol {
            display: block;
            position: absolute;
            top: 100%;
            transform: translateY(-110%) translateZ(-5px);
            transform-origin: top right;
            z-index: -1;
            width: 100%;
            left: 0;
            opacity: 0;
        }

        & ol li:hover ol {
            transform: translateY(0) translateZ(-1px);
            opacity: 1;
        }

        & ol li ol .menu-discord {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            height: 100%;
            width: 100%;
            left: -100%;
            top: 0;
            background-color: var(--nav-support-4-color);
            background-image: url('/Images/Discord_Small_LowRez.webp');
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            transform: rotate(-90deg);
            transform-origin: 0% 0%;
            transition: all var(--transition-menu);
        }

        & ol li:hover ol .menu-discord {
            transform: rotate(0deg);
            border-bottom-left-radius: var(--radius-xl);
        }

        & ol li ol li {
            display: block;
            padding: 10px 0px;
            background: var(--nav-item-color);
            --nav-item-color: var(--nav-item-color-default);
            --nav-notch-color: var(--nav-notch-color-default);
        }

        & ol li ol li a {
            font-size: var(--font-size-sm);
        }

        & ol li ol li:before {
            display: none;
        }

        & ol li ol li:nth-of-type(1n):before {
            background: linear-gradient(45deg, transparent -50%, transparent 45%, var(--nav-notch-color) 45%, var(--nav-notch-color) 55%, transparent 55%, transparent 125%);
            background-repeat: no-repeat;
            border-color: var(--nav-notch-color) transparent transparent var(--nav-notch-color);
        }

        & ol li ol li:first-of-type {
            margin-top: 0;
        }

        & ol li ol li:nth-of-type(even) {
            transform-origin: top left;
            transform: rotate(5deg);
        }

        & ol li ol li:nth-of-type(odd) {
            transform-origin: top right;
            transform: rotate(-5deg);
        }

        & ol li:hover ol li:nth-of-type(1n) {
            transform: none;
            margin: 0px;
        }

        & ol li:hover ol li:nth-of-type(1n):hover:after {
            opacity: 1;
            top: 0vh;
        }

        & ol li ol:hover li:nth-of-type(1n):hover {
            padding: 20px 0px;
        }

        & ol li ol li + li,
        & ol li ol li:hover {
            animation-delay: 0s;
            transition-delay: 0s;
        }

        & ol li ol li:hover {
            --nav-item-color: var(--nav-item-color-default-hover);
        }
        & ol li ol li:nth-of-type(1) {
            transition-delay: 0.1s;
        }
        & ol li ol li:nth-of-type(1):before {
            animation-delay: 0.05s;
        }
        & ol li ol li:nth-of-type(2) {
            transition-delay: 0.2s;
        }
        & ol li ol li:nth-of-type(2):before {
            animation-delay: 0.1s;
        }
        & ol li ol li:nth-of-type(3) {
            transition-delay: 0.3s;
        }
        & ol li ol li:nth-of-type(3):before {
            animation-delay: 0.15s;
        }
        & ol li ol li:nth-of-type(4) {
            transition-delay: 0.4s;
        }
        & ol li ol li:nth-of-type(4):before {
            animation-delay: 0.2s;
        }
        & ol li ol li:nth-of-type(5) {
            transition-delay: 0.5s;
        }
        & ol li ol li:nth-of-type(5):before {
            animation-delay: 0.25s;
        }
        & ol li ol li:nth-of-type(6) {
            transition-delay: 0.6s;
        }
        & ol li ol li:nth-of-type(6):before {
            animation-delay: 0.3s;
        }
        & ol li ol li:nth-of-type(7) {
            transition-delay: 0.7s;
        }
        & ol li ol li:nth-of-type(7):before {
            animation-delay: 0.35s;
        }
        & ol li ol li:nth-of-type(8) {
            transition-delay: 0.8s;
        }
        & ol li ol li:nth-of-type(8):before {
            animation-delay: 0.4s;
        }

        & > ol > li > ol > li:last-of-type {
            border-bottom-left-radius: var(--radius-xl);
            border-bottom-right-radius: var(--radius-xl);
        }
    }

    & > .menu.utility {
        & ol li:before {
            --nav-item-color: var(--nav-utility-color);
        }

        & ol li ol {
            left: -1px;
        }

        & ol li ol li {
            /*color: ;*/
        }

        & ol li ol li:nth-of-type(1) {
            transition: all var(--transition-base);
        }
    }

    & > .menu.support {
        & ol li:before {
            --nav-item-color: var(--nav-support-color);
        }

        & ol li:hover ol:before {
            border: 3px solid var(--nav-support-4-color);
            border-color: var(--nav-support-4-color) transparent transparent var(--nav-support-4-color);
            background: linear-gradient(45deg, transparent -50%, transparent 45%, var(--nav-support-4-color) 45%, var(--nav-support-4-color) 55%, transparent 55%, transparent 125%);
        }

        & ol li ol li:nth-of-type(1) {
            --nav-item-color: var(--nav-support-1-color);
            --nav-notch-color: var(--nav-support-1-color);
        }
        & ol li ol li:nth-of-type(2) {
            --nav-item-color: var(--nav-support-2-color);
            --nav-notch-color: var(--nav-support-2-color);
        }
        & ol li ol li:nth-of-type(3) {
            --nav-item-color: var(--nav-support-3-color);
            --nav-notch-color: var(--nav-support-3-color);
        }
        & ol li ol li:nth-of-type(4) {
            --nav-item-color: var(--nav-support-4-color);
            --nav-notch-color: var(--nav-support-4-color);
        }

        & > ol > li > ol > li:last-of-type {
            border-bottom-left-radius: 0px;
        }
    }

    & > .menu.auth {
        & ol li:before {
            --nav-item-color: var(--nav-auth-color);
        }

        & ol li:nth-of-type(2):before {
            --nav-item-color: var(--nav-auth-alt-color);
        }

        & ol li.register:nth-of-type(2):before {
            --nav-item-color: var(--nav-auth-color);
        }

        & ol li ol li:nth-of-type(3) {
            --nav-item-color: var(--nav-support-3-color);
        }

        & ol li.nav ol li:nth-of-type(odd) {
            --nav-item-color: var(--nav-row-odd-color);
            --nav-notch-color: var(--nav-row-odd-color);
        }
        & ol li.nav ol li:nth-of-type(even) {
            --nav-item-color: var(--nav-row-even-color);
            --nav-notch-color: var(--nav-row-even-color);
        }

        & ol li.account ol li:nth-of-type(1) {
            --nav-item-color: var(--nav-account-1-color);
            --nav-notch-color: var(--nav-account-1-color);
        }
        & ol li.account ol li:nth-of-type(2) {
            --nav-item-color: var(--nav-account-2-color);
            --nav-notch-color: var(--nav-account-2-color);
        }
        & ol li.account ol li:nth-of-type(3) {
            --nav-item-color: var(--nav-account-3-color);
            --nav-notch-color: var(--nav-account-3-color);
        }
        & ol li.account ol li:nth-of-type(4) {
            --nav-item-color: var(--nav-account-4-color);
            --nav-notch-color: var(--nav-account-5-color);
        }
        & ol li.account ol li:nth-of-type(n+5) {
            --nav-item-color: var(--nav-account-5-color);
            --nav-notch-color: var(--nav-account-5-color);
        }
    }
}

.MenuManage_Sub * {
    transition: var(--transition-slow);
}

.MenuManage_Sub small {
    display: block;
    font-weight: 700;
}

.MenuManage_Sub small span {
    display: none;
}


.retired, .retired-img, .retired-img-special {
    --state-rgb: var(--status-retired-rgb);
}

.killswitched, .killswitched-img, .killswitched-img-special {
    --state-rgb: var(--status-killswitched-rgb);
}

/* This is DEFAULT MODE for Surv, Killer & Offering*/
.tooltip, .tooltip-left {
    & .retired.WinCond, & .killswitched.WinCond {
        filter: drop-shadow(0px 0px 10px rgba(var(--state-rgb), 0.95));
    }
    & .retired-img:has(img), & .killswitched-img:has(img) {
        filter: drop-shadow(0px 0px 5px rgba(var(--state-rgb), 1));
    }
    & .retired-img-special:has(img), & .killswitched-img-special:has(img) {
        position: relative;
        &:before {
            content: "";
            position: absolute;
            top: 53px;
            left: 18px;
            width: calc(190px - 15px);
            height: calc(206px - 5px);
            background: rgba(var(--state-rgb), 0.25);
            filter: drop-shadow(0px 0px 10px rgba(var(--black-rgb), 0.75));
            box-shadow: 0 0 15px rgba(var(--state-rgb), 0.75);
        }
        &:after {
            content: "";
            background-image: url(/Images/ImagePlaceholderTile.webp);
            filter: sepia(.4) hue-rotate(225deg) brightness(0.55) drop-shadow(0px 0px 5px var(--shadow-color));
            position: absolute;
            top: 53px;
            left: 18px;
            opacity: .5;
            width: calc(190px - 15px);
            height: calc(206px - 5px);
            z-index: -1;
        }
    }
}

#SurvivorOfferingImageDisplay, #KillerOfferingImageDisplay {
    &.retired-img-special:has(img), &.killswitched-img-special:has(img) {
        &:before, &:after {
            clip-path: polygon(50% 0%, 86% 24%, 86% 76%, 50% 100%, 14% 77%, 13% 24%);
            top: 0;
            left: -10px;
            height: 100px;
            width: 120px;
        }
        &:after {
            background-image: url(/Images/ImagePlaceholderTile.webp);
        }
    }
}

/* This is COMPACT MODE */
#CompactView {
    & .tooltip, & .tooltip-left {
        & .retired-img-special:has(img), & .killswitched-img-special:has(img) {
            &:before, &:after {
                top: 3px;
            }
        }
        & .retired.WinCond, & .killswitched.WinCond {
            filter: drop-shadow(0px 0px 10px rgba(var(--state-rgb), 0.5));
        }
        & .retired .retired-span, & .killswitched .killswitched-span {
            position: relative;
            font-weight: 900;
            filter: drop-shadow(0px 0px 10px rgba(var(--state-rgb), 0.5));

            &::before {
                content: "";
                position: absolute;
                top: -6px;
                left: -6px;
                width: 100%;
                height: 100%;
                background: rgba(var(--state-rgb), 0.25);
                z-index: -2;
                padding: 6px;
                margin: auto;
                border-radius: 0px;
            }
            &::after {
                content: "";
                position: absolute;
                top: calc((5% / 2) - 5px);
                left: calc((0% / 2) - 10px);
                width: 100%;
                height: 95%;
                background: var(--compact-label-background);
                z-index: -1;
                padding: 5px 10px;
                border-radius: var(--radius-md);
                filter: drop-shadow(0px 0px 10px rgba(var(--black-rgb), 0.99));
            }
        }
    }

    & #SurvivorOfferingImageDisplay, & #KillerOfferingImageDisplay {
        &.retired-img-special:has(img), &.killswitched-img-special:has(img) {
            &:after, &:before {
                top: 19px;
            }
        }
    }
}

body.swal2-toast-shown .swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container.swal2-top-right {
    top: 40px;
}

body.aside-collapsed.swal2-toast-shown .swal2-container.swal2-top-end,
body.aside-collapsed.swal2-toast-shown .swal2-container.swal2-top-right {
    top: 5px;
}

.ddcommon.borderRadius .ddArrow {
    transform: rotate(0deg);
    transition: transform var(--transition-base);
    background: url(/JS/msDropdown/images/msdropdown/skin1/dd_arrow.gif) no-repeat;
    background-position-y: 0;
}

.ddcommon.borderRadiusTp .ddArrow {
    transform: rotate(0deg);
    transition: transform var(--transition-base);
    background: url(/JS/msDropdown/images/msdropdown/skin1/dd_arrow.gif) no-repeat;
    background-position-y: -17px;
}

.ddcommon.borderRadiusBtm .ddArrow {
    transform: rotate(180deg);
    transition: transform var(--transition-base);
    background: url(/JS/msDropdown/images/msdropdown/skin1/dd_arrow.gif) no-repeat;
    background-position-y: -17px;
}

#ImageSetSelect_msdd {
    width: 150px !important;
    text-align: center;
    margin-bottom: 5px;
}

#ThemeOverrideSelect_msdd {
    width: 200px !important;
    text-align: center;
    margin-bottom: 5px;
}

ins.adsbygoogle.adsbygoogle-noablate {
    z-index: 0 !important;
}

.ad-container {
    width: 100% !important;
}

.GoogleAdDiv {
    position: absolute;
    bottom: 0;
    width: 300px;
    height: 500px;
}

a.ad_link {
    color: var(--link-text);
    transition: 0.33s ease;
    width: fit-content;
    z-index: 10;
    pointer-events: auto;
}

a.ad_link:hover {
    color: lightgray;
}

.ad-teaser-topright {
    position: absolute;
    right: 10px;
    top: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ad-row {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 0 3%;
    height: auto;
    margin-top: -310px;
    position: absolute;
    z-index: -90000;
}

.ad-slot-wrap {
    height: auto;
    width: 300px;
}

.GoogleAdDiv.ad-slot-relative {
    bottom: unset;
    position: relative;
    height: unset;
}

#ThisRandoAd {
    position: absolute;
    width: 420px;
    top: 480px;
    right: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ThisRandoAd.scrolled {
    top: 190px;
    position: fixed;
}

#StickyRemoveAd {
    position: fixed;
    bottom: 5px;
    right: 145px;
    z-index: 1;
}

.kofi-button {
    background-color: var(--kofi-button-background);
}

#donate-button-container,
#paypal-donate-btn {
    height: 21px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--switch-track-background);
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    box-shadow: 0 0 5px rgba(var(--black-rgb), 0.75), inset 0 0 5px rgba(var(--black-rgb), 0.75);
    z-index: 1;
    background-color: var(--switch-knob-background);
    transition: .4s;
}

.slider.round {
    border-radius: var(--radius-switch);
}

.slider.round:before {
    border-radius: var(--radius-round);
}

.slider-bg {
    z-index: 0;
    position: relative;
    height: 100%;
    width: 100%;
    display: block;
    pointer-events: none;
}

.slider-bg:before, .slider-bg:after {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--radius-switch);
    width: 100%;
    height: 100%;
    display: block;
    box-shadow: 0 0 5px rgba(var(--black-rgb), 0.5), inset 0 0 5px rgba(var(--black-rgb), 0.5);
    pointer-events: none;
    filter: brightness(1);
    transition: all var(--transition-base);
}

.slider-bg:before {
    content: "";
    background: linear-gradient(90deg, var(--switch-track-background) 0%, var(--switch-track-gradient-mid) 70%, var(--switch-track-gradient-end) 100%);
    opacity: 1;
}

.slider-bg:after {
    content: "";
    background: linear-gradient(270deg, var(--switch-track-background-on) 0%, var(--switch-track-gradient-mid-on) 70%, var(--switch-track-gradient-end-on) 100%);
    opacity: 0;
}

div:hover .slider-bg:before, div:hover .slider-bg:after {
    filter: brightness(1.1);
}

input:checked + .slider {
    background-color: var(--switch-track-background-on);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

input:checked + .slider .slider-bg:after {
    opacity: 1;
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--switch-track-background);
}

#GameModeToggle {
    filter: drop-shadow(0px 0px 3px var(--shadow-color));
    height: 34px;
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    & > div:not(#KYFCheckbox) {
        position: relative;
        flex: 1;
        width: 100px;
        min-width: 100px;
        display: flex;
        justify-content: start;
        &:first-of-type {
            justify-content: end;
        }
    }

    #KYFCheckbox {
        height: 35px;
    }
}

.button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.button {
    display: inline-block;
    padding: 6px 20px;
    text-align: center;
    margin: 1px;
    border: 1px solid var(--button-border);
    overflow: visible;
    font: var(--button-font-weight) 13px arial, helvetica, sans-serif;
    text-decoration: none;
    white-space: nowrap;
    color: var(--button-text);
    background-color: var(--button-background);
    transition: background-color .2s ease-out;
    background-clip: padding-box;
    border-radius: var(--radius-xxl);
    box-shadow: 0px 5px 10px var(--shadow-color);
    text-shadow: var(--button-text-shadow);
    user-select: none;
}

.button:hover {
    background-color: var(--button-background-hover);
    color: var(--button-text);
}

.button:active {
    background: var(--button-background-active);
    position: relative;
    /*top: 1px;*/
    text-shadow: none;
    box-shadow: 0 1px 1px rgba(var(--black-rgb), .3) inset;
}

.button[disabled], .button[disabled]:hover, .button[disabled]:active {
    border-color: var(--button-border-disabled);
    background: var(--button-background-disabled);
    position: static;
    color: var(--button-text-disabled);
    box-shadow: none !important;
    text-shadow: none !important;
}

.button.small {
    padding: 4px 12px;
}

.NewBtn {
    border: 1px solid var(--new-button-edge);
    box-shadow: inset 0 0 1px 1px var(--new-button-edge);
    padding: 5px 12px;
    color: rgba(var(--white-rgb), 1);
    background: rgba(var(--black-rgb), .10);
    transition: all var(--transition-base);

    & * {
        user-select: none;
        user-drag: none;
        pointer-events: none;
    }
}

.NewBtn:hover {
    background: rgba(var(--black-rgb), .35);
}

.NewBtn:active {
    background: var(--new-button-background-active);
}

.NewBtn.disabled, .NewBtn:disabled {
    border-color: transparent;
    background: rgba(var(--black-rgb), .1);
    color: rgba(var(--white-rgb), .5);
    box-shadow: inset 0 0 1px 1px var(--shadow-color);
}

.btn.styled {
    font-weight: 600;
    border: solid 2px rgb(var(--black-rgb));
    outline: 0;
    padding: 1rem 4rem;
    font-size: 1.5rem;
    letter-spacing: 0.08rem;
    background-color: var(--button-styled-background);
    border-radius: 0.35rem;
    position: relative;
    cursor: pointer;
    color: var(--dark-button-text);
}

.btn.styled::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--white-rgb));
    z-index: -1;
    border-radius: 0.35rem;
    border: solid 2px rgb(var(--black-rgb));
    transition: all 0.3s ease-in-out;
}

#randobtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    position: relative;
    top: 20px;
    height: 0;
}

#randobtn button {
    font-size: var(--randomize-button-font-size);
    margin-top: 5px;
    position: absolute;
}

#randobtn span {
    position: relative;
    top: 35px;
    display: none;
    padding-top: 5px;
}

.notransition {
    transition: none !important;
}

#scroll {
    position: fixed;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: var(--scroll-button-background);
    text-indent: -9999px;
    display: none;
    border-radius: 60px;
    transition: background-color var(--transition-fast);
    z-index: 2;
    box-shadow: 0px 0px 10px 0px rgba(var(--black-rgb), 0.5);
}

#scroll:hover {
    background-color: var(--scroll-button-background-hover);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
    opacity: 1;
    box-shadow: 0px 0px 20px 0px rgba(var(--black-rgb), 1);
}

#scroll span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom-color: var(--scroll-button-arrow);
}

#scroll:hover span {
    border-bottom-color: var(--scroll-button-arrow-hover);
}

#Counter {
    background: red;
    background: var(--counter-gradient);
    /*background: linear-gradient(to right, #199b1e , #cc3ad4, #e8c252, #ff8800, #ab713c, white);*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: white;
    font-size: var(--font-size-lg);
}

#patreon {
    position: relative;

    &:after {
        content: "Dev Patreon";
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        font-size: var(--font-size-xs);
        font-family: var(--font-script);
    }

    & > img {
        width: 300px;
        height: 111px;
    }
}

#discord-btn > img {
    width: 300px;
    height: 100px;
    border-radius: var(--radius-md);
}

#nav h1 {
    font-size: var(--nav-title-font-size);
}

.toggleSnow, .toggleFireworks, .toggleThemeEffects {
    position: fixed;
    bottom: 20px;
    left: 185px;
    z-index: 10;
    transition: all var(--transition-base);
}

.toggleSnow a, .toggleFireworks a, .toggleThemeEffects a {
    color: var(--link-text);
}

.toggleSnow a:hover, .toggleFireworks a:hover, .toggleThemeEffects a:hover {
    color: var(--seasonal-toggle-text-hover);
}

.AdminTag {
    font-size: var(--font-size-xs);
    letter-spacing: 1px;
    margin: 0;
    height: fit-content;
    font-family: "Times New Roman", Times, serif;
}

.site-version-info.site-version-badge {
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    flex-direction: row;
}

.comment_content_html {
    margin: 0;
    padding: 5px 0 5px 0;
}

.quick-info-floater-hint {
    font-size: var(--note-font-size);
    opacity: 0.6;
    font-family: var(--font-marker);
}

#DEVSITEBANNER {
    width: 100%;
    height: fit-content;
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--site-text);
    text-align: center;
    padding: 6px;
    background: var(--dev-banner-background);
    z-index: var(--z-top);
    pointer-events: none;
}