.shadow {
  box-shadow: var(--shadow-color) 0 3px 5px 0;
}
.shadow-big {
  box-shadow: var(--shadow-color) 0 4px 10px 0;
}
.standard-border-radius {
  border-radius: var(--standard-border-radius);
}
.standard-border {
  border: var(--standard-border);
}
.standard-border-input {
  border: var(--standard-border);
}
.standard-paragraph {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.invert-input-colors {
  --input-background-color: var(--bg-color);
}
.invert-input-colors input,
.invert-input-colors textarea {
  background-color: var(--bg-color);
}
.non-expanding-block {
  width: min-content;
  min-width: 100%;
  display: block;
}
@layer base {
  body {
    --bg-color: #111113;
    --fg-color: #b0b0b0;
    --border-color-default: #66666f;
    --border-color: var(--border-color-default);
    --border-style: solid;
    --border-color-input: var(--border-color-default);
    --border-color-highlight: #888890;
    --default-table-bg-color: #202027;
    --table-bg-color: var(--default-table-bg-color);
    --color-sps-sks: #22ff22;
    --color-crit: #ff2222;
    --color-dhit: #ff8800;
    --color-det: #0099ff;
    --color-tnc: #ffff00;
    --color-piety: #ff00ff;
    --stat-mix-primary: 65%;
    --stat-mix-primary-bg: 12%;
    --stat-mix-secondary: 15%;
    --stat-mix-secondary-bg: 6%;
    --materia-overcap-major: #ff0000;
    --materia-overcap: #dd7700;
    --standard-border-default: 1px var(--border-style) var(--border-color);
    --standard-border: var(--standard-border-default);
    --standard-border-part: var(--border-style) var(--border-color);
    --standard-border-input: 1px solid var(--border-color-input);
    --soft-border: 1px var(--standard-border-part);
    --thick-border: 1px var(--standard-border-part);
    --selected-outline: 3px solid var(--table-selected-outline-color);
    --stat-color: var(--fg-color);
    --modal-backdrop-color: #7c7cbb33;
    --error-border-color: #9c0000;
    --standard-border-radius: 5px;
    --optional-border-radius: 0;
    --action-col-width: 73px;
    --set-name-col-width: min(300px, max(calc(30vw - 100px), 160px));
    --item-name-col-width: 100%;
    --item-name-col-max-width: 300px;
    --item-table-max-width: 700px;
    --materia-melded-slot-blend-color: #cccccc;
    --scrollbar-fg: #666675;
    --scrollbar-bg: #444454;
    --stat-tiering-box-mix-color: #fff;
    --faint-border: 1px solid #60606680;
    --plain-link-color: #4f84ff;
    --plain-link-hover-color: #76cfff;
    --editor-sides-padding: 4px;
    --editor-bottom-padding: 8px;
    --editor-top-padding: 8px;
    --stat-col-width: 40px;
    --chance-stat-col-width: 157px;
    --multi-stat-col-width: 120px;
    --multi-mit-stat-col-width: 170px;
    --hp-stat-col-width: 60px;
    --bottom-flex-basis: 60%;
    --modal-bottom-button-width: 70px;
    --materia-box-shadow-spread: 2px;
    --input-background-color: var(--bg-color);
    --relic-stat-input-background-color: var(--bg-color);
    --relic-stat-input-background-hover-color: #26263f;
    --loading-spinner-color: #fff;
    --button-active-background-color: #121446;
    --button-active-border-color: #ffffff;
    --table-bg-color-selected: #303345;
    --table-bg-color-hover: #3a4055;
    --table-selected-outline-color: #0ba3df;
    --action-input-hover-background-color: #ddf;
    --input-hover-background-color: #303649;
    --selection-border-opacity: 80%;
    --sim-color-mix-percent: 70%;
    --shadow-color: black;
    --transition-time: 0.3s;
    --input-transition-time: 0.1s;
    --tiering-color-mix: 2%;
    --abilities-row-height: 20px;
    --button-height: 20px;
    --issue-warning-color: #be5116;
    --issue-error-color: #9c0000;
    --toolbar-button-size: 40px;
    --toolbar-border-radius: 8px;
    --role-color-tank: #4848ff;
    --role-color-healer: #13a813;
    --role-color-dps: #ff0000;
    --invalid-input-box-shadow: 1px 1px 2px red inset, -1px -1px 2px #ff6000 inset;
    --perfect-tiering-box-shadow: 0 0 5px -1px inset color-mix(in srgb, var(--stat-color) 50%, var(--border-color));
    --cell-padding-top: 1px;
    --cell-padding-bottom: 1px;
    --cell-padding-left: 3px;
    --cell-padding-right: 3px;
    --default-table-row-height: 23px;
    color: var(--fg-color);
    background-color: var(--bg-color);
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow-y: hidden;
    margin: 0;
    scrollbar-color: var(--scrollbar-fg) var(--scrollbar-bg);
  }
  body.light-mode {
    --bg-color: #e7dcd9;
    --fg-color: #000000;
    --border-color: #a59083;
    --border-color-highlight: #150f0f;
    --default-table-bg-color: #fff8f1;
    --table-bg-color-selected: #fdebd3;
    --table-bg-color-hover: #f1d8b8;
    --input-hover-background-color: var(--table-bg-color-hover);
    --input-background-color: var(--table-bg-color);
    --materia-melded-slot-blend-color: #666666;
    --scrollbar-fg: #887461;
    --scrollbar-bg: #b7a691;
    --stat-tiering-box-mix-color: #000;
    --plain-link-color: #1a3072;
    --plain-link-hover-color: #2778a9;
    --action-input-hover-background-color: #833e1d;
    --table-selected-outline-color: #d28996;
    --relic-stat-input-background-color: #efab8a;
    --relic-stat-input-background-hover-color: #ffc2a5;
    --loading-spinner-color: #210;
    --button-active-background-color: #d27d32;
    --button-active-border-color: #734100;
    --sim-color-mix-percent: 50%;
    --shadow-color: #888;
    --tiering-color-mix: 5%;
    --modal-backdrop-color: #372a2733;
  }
  body.light-mode .melded-cell-extra-style {
    background-color: var(--stat-color);
  }
  body.light-mode .gear-sheets-table {
    --input-background-color: var(--bg-color);
  }
  @media screen and (max-width: 600px) {
    body {
      transform-origin: 0 0;
    }
    body [col-id='mats'] {
      display: none;
    }
  }
  body div#dev-menu-area {
    margin: 5px;
    padding: 5px;
    border: 1px var(--standard-border-part);
  }
  body div#dev-menu-area button {
    margin: 10px;
  }
  body div#show-hide-menu-button-area {
    z-index: var(--zi-show-hide-menu-button);
    position: absolute;
    left: 5px;
    top: 5px;
    width: 29px;
    height: 29px;
  }
  body div#show-hide-menu-button-area button#show-hide-menu-button {
    width: 100%;
    height: 100%;
    font-size: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  body div#help-button-area {
    z-index: var(--zi-show-hide-menu-button);
    position: absolute;
    right: 5px;
    top: 5px;
    width: 29px;
    height: 29px;
  }
  body div#help-button-area button#help-button {
    width: 100%;
    height: 100%;
    font-size: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  body div#help-button-area * {
    text-decoration: none;
  }
  body div#main-menu-area {
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
    background-color: var(--table-bg-color);
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    margin-bottom: 5px;
  }
  body div#main-menu-area a,
  body div#main-menu-area a:link,
  body div#main-menu-area a:visited,
  body div#main-menu-area a:hover {
    color: var(--fg-color);
    font-size: 13.333px;
    box-sizing: border-box;
    padding: 8px 8px 12px 8px;
    margin: 0;
    text-decoration: none;
    display: inline-block;
    transition-duration: var(--input-transition-time);
    transition-property: color, background-color, border-color, outline-color;
  }
  body div#main-menu-area a:hover,
  body div#main-menu-area a:link:hover,
  body div#main-menu-area a:visited:hover,
  body div#main-menu-area a:hover:hover {
    transition: none;
  }
  body div#main-menu-area a span,
  body div#main-menu-area a:link span,
  body div#main-menu-area a:visited span,
  body div#main-menu-area a:hover span {
    white-space: nowrap;
  }
  body div#main-menu-area a:hover {
    background-color: var(--table-bg-color-selected);
  }
  body div#main-menu-area a.current-page {
    background-color: var(--input-hover-background-color);
  }
  body div#main-menu-area a:active {
    background-color: var(--button-active-background-color);
  }
  body.top-menu-hidden div#main-menu-area {
    display: none;
  }
  body div#content-area {
    position: relative;
    flex-grow: 1;
  }
  body div#content-area > *:only-child {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  body ::-webkit-scrollbar {
    background-color: var(--scrollbar-bg);
  }
  body ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-fg);
  }
  * {
    touch-action: pan-x pan-y;
  }
  .header-area p,
  .gear-sheet-editor-area p {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 600px;
  }
  .soft-border {
    border: var(--standard-border);
  }
  .invalid-numeric-input {
    box-shadow: var(--invalid-input-box-shadow);
  }
  .standard-round-border {
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
  }
  .standard-round-border-input {
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
  }
  .borderless-button {
    padding: 0 4px 0 4px;
    margin-left: 2px;
    background: none;
    border: none;
  }
  .borderless-button:hover {
    color: var(--action-input-hover-background-color);
  }
  .borderless-button:hover svg {
    fill: var(--action-input-hover-background-color);
  }
  body {
    /* Sets table z order needs to be:
  Pinned header cols >

   */
    --zi-sets-table-normal-columns: 70;
    --zi-sets-table-selected-cell: 71;
    --zi-sets-table-pinned-columns: 80;
    --zi-sets-table-selected-highlights: 90;
    --zi-sets-table-dragging-row: 91;
    --zi-sets-table-header-row: 92;
    --zi-sets-table-header-row-pinned: 95;
    --zi-sets-table-buttons-area: 99;
    --zi-midbar: 100;
    --zi-show-hide-menu-button: 120;
    --zi-slot-materia-popup: 150;
    --zi-slot-materia-popup-cell: 180;
    --zi-tiering-expansion: 185;
    --zi-toolbar-popout: 186;
    --zi-loading-blocker: 190;
    --zi-privacy-link: 195;
    --zi-add-sim-dialog: 200;
    --zi-true-modal: 300;
  }
  .button-transition {
    transition-duration: var(--input-transition-time);
    transition-property: color, background-color, border-color, outline-color;
  }
  .no-transition {
    transition: none;
  }
  .button-auto-transition {
    transition-duration: var(--input-transition-time);
    transition-property: color, background-color, border-color, outline-color;
  }
  .button-auto-transition:hover {
    transition: none;
  }
  .table-item-selected-bg {
    background-color: var(--table-bg-color-selected);
  }
  .table-element-hover-active {
    background-color: var(--table-bg-color-hover);
    transition: none;
  }
  table {
    position: relative;
    border: none;
    border-spacing: 0;
  }
  table tbody,
  table thead,
  table tfoot {
    text-align: left;
  }
  table.hoverable > tr,
  table.hoverable > * > tr {
    transition-duration: var(--input-transition-time);
    transition-property: color, background-color, border-color, outline-color;
  }
  table.hoverable > tr > td,
  table.hoverable > * > tr > td,
  table.hoverable > tr th.hoverable,
  table.hoverable > * > tr th.hoverable {
    transition-duration: var(--input-transition-time);
    transition-property: color, background-color, border-color, outline-color;
  }
  table.hoverable > tr.special-row-hoverable > th,
  table.hoverable > * > tr.special-row-hoverable > th {
    transition-duration: var(--input-transition-time);
    transition-property: color, background-color, border-color, outline-color;
  }
  table.hoverable > tr > .hoverable:hover,
  table.hoverable > * > tr > .hoverable:hover {
    background-color: var(--table-bg-color-hover);
    transition: none;
  }
  table.hoverable > tr:not(:has(td.hoverable:hover)):hover,
  table.hoverable > * > tr:not(:has(td.hoverable:hover)):hover {
    transition: none;
  }
  table.hoverable > tr:not(:has(td.hoverable:hover)):hover > td,
  table.hoverable > * > tr:not(:has(td.hoverable:hover)):hover > td {
    background-color: var(--table-bg-color-hover);
    transition: none;
  }
  table.hoverable > tr:not(:has(td.hoverable:hover)):hover > th.hoverable:hover,
  table.hoverable > * > tr:not(:has(td.hoverable:hover)):hover > th.hoverable:hover {
    background-color: var(--table-bg-color-hover);
    transition: none;
  }
  table.hoverable > tr:not(:has(td.hoverable:hover)):hover > th.hoverable:hover span.header-cell-gear,
  table.hoverable > * > tr:not(:has(td.hoverable:hover)):hover > th.hoverable:hover span.header-cell-gear {
    color: var(--action-input-hover-background-color);
    opacity: unset;
  }
  table.hoverable > tr:not(:has(td.hoverable:hover)):hover.special-row-hoverable:hover,
  table.hoverable > * > tr:not(:has(td.hoverable:hover)):hover.special-row-hoverable:hover {
    background-color: var(--table-bg-color-hover);
    transition: none;
  }
  table.hoverable > tr:not(:has(td.hoverable:hover)):hover.special-row-hoverable > *:hover,
  table.hoverable > * > tr:not(:has(td.hoverable:hover)):hover.special-row-hoverable > *:hover {
    background-color: var(--table-bg-color-hover);
    transition: none;
  }
  table tr {
    /*border: 2px solid #666666;*/
    border: 3px var(--standard-border-part);
    scroll-margin: 30px;
    position: relative;
  }
  table tr > th,
  table tr > td {
    background-color: var(--table-bg-color);
  }
  table tr th {
    border-top: var(--thick-border);
    border-bottom: var(--thick-border);
  }
  table tr th:first-child {
    border-left: var(--thick-border);
  }
  table tr th:last-child {
    border-right: var(--thick-border);
  }
  table tr th span.header-cell-detail {
    font-weight: normal;
    opacity: 60%;
    line-height: 0;
    display: inline-block;
  }
  table tr:first-child {
    border-top: var(--standard-border);
  }
  table tr:first-child td {
    border-top: var(--thick-border);
  }
  table tr .selection-highlight {
    content: '';
    border-radius: 5px;
    opacity: var(--selection-border-opacity);
    position: absolute;
    --border-style: 2px solid var(--table-selected-outline-color);
    border: var(--border-style);
    left: var(--table-selection-left-pad, 0);
    right: var(--table-selection-right-pad, 0);
    top: 0;
    bottom: 0;
    pointer-events: none;
  }
  table tr td,
  table tr th {
    position: relative;
    padding: var(--cell-padding-top) var(--cell-padding-right) var(--cell-padding-bottom) var(--cell-padding-left);
  }
  table tr td[is-selected="true"],
  table tr th[is-selected="true"] {
    background-color: var(--table-bg-color-selected);
  }
  table tr td[is-selected="true"] > *:first-child::before,
  table tr th[is-selected="true"] > *:first-child::before {
    content: '';
    border-radius: 5px;
    opacity: var(--selection-border-opacity);
    position: absolute;
    --border-style: 2px solid var(--table-selected-outline-color);
    border: var(--border-style);
    left: var(--table-selection-left-pad, 0);
    right: var(--table-selection-right-pad, 0);
    top: 0;
    bottom: 0;
    pointer-events: none;
  }
  table tr[is-selected="true"] td,
  table tr[is-selected="true"] th {
    background-color: var(--table-bg-color-selected);
    --materia-box-shadow-spread: 3px;
  }
  table tr[is-selected="true"] td > *:first-child::before,
  table tr[is-selected="true"] th > *:first-child::before {
    content: '';
    border-radius: 5px;
    opacity: var(--selection-border-opacity);
    position: absolute;
    --border-style: 2px solid var(--table-selected-outline-color);
    border: var(--border-style);
    left: var(--table-selection-left-pad, 0);
    right: var(--table-selection-right-pad, 0);
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: var(--zi-sets-table-selected-highlights);
    --table-selection-left-pad: -1px;
    border-left: unset;
    border-right: unset;
    border-radius: 0;
  }
  table tr[is-selected="true"] td:first-child > *:first-child::before,
  table tr[is-selected="true"] th:first-child > *:first-child::before {
    left: 0;
    border-left: var(--border-style);
    border-radius: 5px 0 0 5px;
  }
  table tr[is-selected="true"] td:last-child > *:first-child::before,
  table tr[is-selected="true"] th:last-child > *:first-child::before {
    border-right: var(--border-style);
    border-radius: 0 5px 5px 0;
  }
  table tr td {
    border-left: var(--standard-border);
    border-top: none;
    border-bottom: var(--thick-border);
    border-right: none;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    scroll-margin: 20px;
  }
  table tr td:last-child {
    border-right: var(--standard-border);
  }
  table tr td[col-id="actions"] div {
    display: inline-flex;
  }
  table tr td[col-id="setname"] {
    border-left: none;
  }
  table tr td[col-id="setname"] > div {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  table tr td[col-id="setname"] .gear-set-issue-icon {
    margin-right: 5px;
  }
  table tr td[col-id="setname"] .ffxiv-frameless-job-icon {
    padding-left: 2px;
    padding-right: 3px;
    display: inline;
    height: 1em;
    vertical-align: -0.125em;
    overflow: visible;
    transform: scale(1.2);
    filter: drop-shadow(0 2px 1px #0009) brightness(1.3);
  }
  table tr td[col-id="icon"] {
    padding: 0;
    margin: 0;
    border-right: none;
    box-sizing: content-box;
  }
  table tr td[col-id="icon"] img {
    display: block;
    aspect-ratio: 1;
  }
  table tr td[col-id="itemname"] {
    border-left: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  select {
    transition-duration: var(--input-transition-time);
    transition-property: color, background-color, border-color, outline-color;
    color: var(--fg-color);
    background-color: var(--input-background-color);
    border-radius: var(--standard-border-radius);
    border: var(--standard-border-input);
    font-size: 13.333px;
    height: var(--button-height);
    box-sizing: border-box;
  }
  select:hover {
    transition: none;
  }
  select:hover,
  select:focus {
    background-color: var(--input-hover-background-color);
  }
  .button-font-style {
    font-size: 13.333px;
  }
  .like-a-button {
    color: var(--fg-color);
    background-color: var(--input-background-color);
    border-radius: var(--standard-border-radius);
    border: var(--standard-border-input);
    font-size: 13.333px;
    height: var(--button-height);
    box-sizing: border-box;
  }
  button {
    color: var(--fg-color);
    background-color: var(--input-background-color);
    border-radius: var(--standard-border-radius);
    border: var(--standard-border-input);
    font-size: 13.333px;
    height: var(--button-height);
    box-sizing: border-box;
    transition-duration: var(--input-transition-time);
    transition-property: color, background-color, border-color, outline-color;
  }
  button:hover {
    transition: none;
    background-color: var(--input-hover-background-color);
  }
  button:active {
    background-color: var(--button-active-background-color);
    border-color: var(--button-active-border-color);
  }
  .extra-stat-info {
    float: right;
    padding-right: 8px;
  }
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="email"] {
    color: var(--fg-color);
    border-radius: var(--standard-border-radius);
    border-color: var(--border-color);
  }
  input[type="text"]:invalid,
  input[type="number"]:invalid,
  input[type="password"]:invalid,
  input[type="email"]:invalid {
    border-color: var(--error-border-color);
  }
  textarea {
    color: var(--fg-color);
    background: var(--table-bg-color);
    border: var(--thick-border);
    border-radius: var(--standard-border-radius);
    width: min(600px, 90vw);
    height: 300px;
  }
  .title-editor {
    margin-bottom: 10px;
    width: 400px;
    font-size: 30px;
    text-align: center;
  }
  .gear-set-name-editor {
    margin-bottom: 10px;
    width: 400px;
    font-size: 30px;
    text-align: center;
  }
  .sim-name-editor {
    margin-bottom: 10px;
    width: 400px;
    font-size: 30px;
    text-align: center;
  }
  table.gear-plan-table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: clip;
  }
  table.gear-plan-table td {
    scroll-margin-top: 68px;
    scroll-margin-bottom: 30px;
    z-index: var(--zi-sets-table-normal-columns);
  }
  table.gear-plan-table td[is-selected="true"] {
    z-index: var(--zi-sets-table-selected-cell);
  }
  table.gear-plan-table tr {
    scroll-margin-top: 60px;
    scroll-margin-bottom: 40px;
    position: relative;
  }
  table.gear-plan-table tr:first-child {
    --sets-table-top-padding: 0;
    --sets-table-left-padding: 0;
    position: sticky;
    top: var(--sets-table-top-padding);
    border: var(--thick-border);
    z-index: var(--zi-sets-table-header-row);
    background-color: color-mix(in srgb, var(--table-bg-color) 60%, transparent);
  }
  table.gear-plan-table tr:first-child th {
    height: 40px;
    border-top: var(--thick-border);
    border-bottom: var(--thick-border);
    padding: 0 5px 0 5px;
  }
  table.gear-plan-table tr:first-child th:first-child {
    border-left: var(--thick-border);
    z-index: var(--zi-sets-table-header-row-pinned) !important;
  }
  table.gear-plan-table tr:first-child th:nth-child(2) {
    z-index: var(--zi-sets-table-header-row-pinned) !important;
  }
  table.gear-plan-table tr td:first-child {
    left: 0;
    width: var(--action-col-width);
    min-width: var(--action-col-width);
    max-width: var(--action-col-width);
    outline: inherit;
  }
  table.gear-plan-table tr td:first-child button {
    padding: 0 4px 0 4px;
    margin-left: 2px;
    background: none;
    border: none;
    font-size: 13.2px;
  }
  table.gear-plan-table tr td:first-child button:hover {
    color: var(--action-input-hover-background-color);
  }
  table.gear-plan-table tr td:first-child button:hover svg {
    fill: var(--action-input-hover-background-color);
  }
  table.gear-plan-table tr td:first-child button:hover {
    color: var(--action-input-hover-background-color);
  }
  table.gear-plan-table tr td:nth-child(2) {
    border-right: var(--standard-border);
    white-space: nowrap;
    width: var(--set-name-col-width);
    max-width: var(--set-name-col-width);
    min-width: var(--set-name-col-width);
  }
  table.gear-plan-table tr td:nth-child(3) {
    border-left: none;
  }
  table.gear-plan-table tr th {
    cursor: default;
  }
  table.gear-plan-table tr td,
  table.gear-plan-table tr th.hoverable {
    cursor: pointer;
  }
  table.gear-plan-table tr td.stat-col,
  table.gear-plan-table tr th.stat-col {
    --cell-width: var(--stat-col-width);
    width: var(--cell-width);
    min-width: var(--cell-width);
    max-width: var(--cell-width);
  }
  table.gear-plan-table tr td.stat-col.chance-stat-col,
  table.gear-plan-table tr th.stat-col.chance-stat-col {
    --cell-width: var(--chance-stat-col-width);
  }
  table.gear-plan-table tr td.stat-col.multiplier-stat-col,
  table.gear-plan-table tr th.stat-col.multiplier-stat-col {
    --cell-width: var(--multi-stat-col-width);
  }
  table.gear-plan-table tr td.stat-col.multiplier-mit-stat-col,
  table.gear-plan-table tr th.stat-col.multiplier-mit-stat-col {
    --cell-width: var(--multi-mit-stat-col-width);
  }
  table.gear-plan-table tr td.stat-col.stat-col-hp,
  table.gear-plan-table tr th.stat-col.stat-col-hp {
    --cell-width: var(--hp-stat-col-width);
  }
  table.gear-plan-table tr td:first-child,
  table.gear-plan-table tr th:first-child,
  table.gear-plan-table tr td:nth-child(2),
  table.gear-plan-table tr th:nth-child(2) {
    box-sizing: border-box;
    position: sticky;
    z-index: var(--zi-sets-table-pinned-columns) !important;
    --table-selection-right-pad: -1px;
  }
  table.gear-plan-table tr td:first-child,
  table.gear-plan-table tr th:first-child {
    left: 0;
    width: var(--action-col-width);
    min-width: var(--action-col-width);
    max-width: var(--action-col-width);
  }
  table.gear-plan-table tr td:nth-child(2),
  table.gear-plan-table tr th:nth-child(2) {
    left: var(--action-col-width);
  }
  table.gear-plan-table tr td[col-id^="sim-col-"],
  table.gear-plan-table tr th[col-id^="sim-col-"] {
    min-width: 70px;
  }
  table.gear-plan-table tr.dragging {
    z-index: var(--zi-sets-table-dragging-row);
    pointer-events: none;
  }
  table.gear-plan-table tr.dragging td {
    border-top: var(--standard-border) inset;
  }
  table.gear-plan-table.view-only {
    --action-col-width: 10px;
    --chance-stat-col-width: 40px;
    --multi-stat-col-width: 40px;
    --multi-mit-stat-col-width: 40px;
  }
  table.gear-plan-table.view-only .stat-col {
    text-align: center;
  }
  table.gear-plan-table.view-only .extra-stat-info {
    display: none !important;
  }
  table.gear-plan-table.view-only.show-advanced-stats {
    --chance-stat-col-width: 110px;
    --multi-stat-col-width: 70px;
    --multi-mit-stat-col-width: 130px;
  }
  table.gear-plan-table.view-only.show-advanced-stats .stat-col-less-important {
    display: revert;
  }
  table.gear-plan-table.view-only.show-advanced-stats .extra-stat-info {
    display: unset !important;
  }
  table.gear-plan-table.view-only td[col-id="actions"] > div {
    display: none;
  }
  table.gear-plan-table.view-only div.set-name-desc-holder span {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  table.gear-plan-table.view-only div.set-name-desc-holder span:last-child {
    opacity: 75%;
  }
  table.gear-plan-table.view-only div.chance-stat-display span,
  table.gear-plan-table.view-only div.multiplier-stat-display span,
  table.gear-plan-table.view-only div.multiplier-mit-stat-display span {
    display: block;
  }
  table.gear-plan-table.view-only div.chance-stat-display span:first-child,
  table.gear-plan-table.view-only div.multiplier-stat-display span:first-child,
  table.gear-plan-table.view-only div.multiplier-mit-stat-display span:first-child {
    text-align: center;
  }
  .text-deemphasise {
    opacity: 75%;
  }
  div.chance-stat-display span:last-child,
  div.multiplier-stat-display span:last-child,
  div.multiplier-mit-stat-display span:last-child {
    opacity: 75%;
  }
  .button-row > * {
    margin: 5px;
  }
  #content-area {
    text-align: center;
  }
  #new-sheet-form fieldset,
  save-as-modal fieldset,
  change-props-modal fieldset {
    text-align: center;
    display: inline-grid;
    border: none;
  }
  job-picker .job-picker-section {
    padding-top: 10px;
    display: grid;
    grid-template-columns: repeat(6, 40px);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
  }
  job-picker .job-picker-section.job-picker-section-tank {
    --role-color: var(--role-color-tank);
  }
  job-picker .job-picker-section.job-picker-section-healer {
    --role-color: var(--role-color-healer);
  }
  job-picker .job-picker-section.job-picker-section-melee,
  job-picker .job-picker-section.job-picker-section-range,
  job-picker .job-picker-section.job-picker-section-caster {
    --role-color: var(--role-color-dps);
  }
  job-picker .job-picker-section .job-picker-job-icon {
    flex-grow: 0;
    height: 40px;
    width: 40px;
    background: none;
    padding: 0;
    position: relative;
    z-index: 5;
    filter: saturate(50%);
  }
  job-picker .job-picker-section .job-picker-job-icon img {
    width: 100%;
    height: 100%;
    max-height: unset;
  }
  job-picker .job-picker-section .job-picker-job-icon:hover {
    filter: saturate(200%);
  }
  job-picker .job-picker-section .job-picker-job-icon:hover img {
    opacity: 100%;
  }
  job-picker .job-picker-section .job-picker-job-icon:active {
    border-color: #00000000;
    filter: brightness(80%);
  }
  job-picker .job-picker-section .job-picker-job-icon.selected {
    z-index: 2;
    filter: drop-shadow(0 0 10px var(--role-color)) saturate(200%);
  }
  job-picker .job-picker-section .job-picker-job-icon.selected:active {
    border-color: #00000000;
    filter: drop-shadow(0 0 10px var(--role-color)) saturate(200%) brightness(80%);
  }
  job-picker .job-picker-section .job-picker-job-icon.selected img {
    opacity: 100%;
  }
  #content-area > .my-sheets-section .named-section-content-area {
    width: 600px;
    scrollbar-gutter: stable;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table {
    overflow: auto;
    width: 100%;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table thead {
    position: sticky;
    top: 0;
    z-index: var(--zi-sets-table-header-row);
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table tr {
    height: var(--default-table-row-height);
    max-height: var(--default-table-row-height);
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table tr:not(:has(th)) {
    cursor: pointer;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table tr.new-sheet-row {
    cursor: pointer;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table tr.dragging {
    z-index: 5;
    opacity: 0.75;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table td {
    border: none;
    border-top: var(--standard-border);
    height: var(--default-table-row-height);
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table td[col-id="sheetjob"] {
    width: 60px;
    text-align: right;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table td[col-id="sheetjob"] img {
    height: 100%;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table td[col-id="sheetjobicon"] {
    width: 30px;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table td[col-id="sheetjobicon"] img {
    height: 100%;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table th {
    --thick-border: none;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table .new-sheet-row:hover .svg-glyph {
    fill: var(--action-input-hover-background-color);
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table .new-sheet-row th {
    font-weight: normal;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table .new-sheet-row th i,
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table .new-sheet-row th svg {
    padding-left: 8px;
    padding-right: 8px;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table .search-row-outer {
    cursor: unset;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table .search-row {
    display: flex;
    gap: 5px;
    width: 100%;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table .search-row * {
    box-sizing: border-box;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table .search-row input {
    width: 100%;
    padding-left: 5px;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table .search-row button {
    aspect-ratio: 1;
    padding: 0;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table .searched .drag-handle {
    display: none;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table td[col-id="sheetactions"] {
    width: 52px;
    max-height: var(--default-table-row-height);
    height: var(--default-table-row-height);
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table td[col-id="sheetactions"] .svg-glyph {
    font-size: 13.2px;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table td[col-id="sheetactions"] i {
    font-size: 14px;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table td[col-id="sheetactions"] > div {
    display: inline-block;
    height: 20px;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table td[col-id="sheetactions"] button {
    padding: 0 4px 0 4px;
    margin-left: 2px;
    background: none;
    border: none;
    padding: 0;
    margin-left: 0;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table td[col-id="sheetactions"] button:hover {
    color: var(--action-input-hover-background-color);
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table td[col-id="sheetactions"] button:hover svg {
    fill: var(--action-input-hover-background-color);
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table td[col-id="syncstatus"] {
    width: 35px;
    min-width: 35px;
    max-width: 35px;
  }
  #content-area > .bis-browser .named-section-content-area {
    width: 600px;
  }
  #content-area > .bis-browser .named-section-content-area .button-row {
    margin-bottom: 5px;
    display: flex;
  }
  #content-area > .bis-browser .named-section-content-area .button-row .up-button {
    background-color: var(--table-bg-color);
    flex-grow: 1;
    text-align: left;
    border-radius: 0;
    padding: 5px;
    box-sizing: content-box;
    margin: 0;
    cursor: pointer;
  }
  #content-area > .bis-browser .named-section-content-area .button-row .up-button:hover {
    background-color: var(--table-bg-color-hover);
  }
  #content-area > .bis-browser .named-section-content-area .button-row .up-button:disabled {
    visibility: hidden;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table {
    overflow: auto;
    padding: 0;
    width: 100%;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table tr {
    height: var(--default-table-row-height);
    max-height: var(--default-table-row-height);
    cursor: pointer;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table tr:first-child th {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table td {
    border: none;
    border-top: var(--standard-border);
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table td[col-id="type"] {
    font-size: 30px;
    text-align: center;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table td[col-id="type"] img {
    width: 100%;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table td[col-id="name"] {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table td[col-id="name"] div.bis-sheet-name {
    font-weight: bold;
    font-size: 17px;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table td[col-id="name"] div.bis-sheet-description {
    font-size: 15px;
    opacity: 75%;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table th {
    --thick-border: none;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table .new-sheet-row:hover .svg-glyph {
    fill: var(--action-input-hover-background-color);
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table .new-sheet-row th {
    font-weight: normal;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table .new-sheet-row th i,
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table .new-sheet-row th svg {
    padding-left: 8px;
    padding-right: 8px;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table td[col-id="sheetactions"] {
    width: 50px;
    max-height: var(--default-table-row-height);
    height: var(--default-table-row-height);
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table td[col-id="sheetactions"] .svg-glyph {
    font-size: 13.2px;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table td[col-id="sheetactions"] i {
    font-size: 14px;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table td[col-id="sheetactions"] > div {
    display: inline-block;
    height: 20px;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table td[col-id="sheetactions"] button {
    padding: 0 4px 0 4px;
    margin-left: 2px;
    background: none;
    border: none;
    padding: 0;
    margin-left: 0;
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table td[col-id="sheetactions"] button:hover {
    color: var(--action-input-hover-background-color);
  }
  #content-area > .bis-browser .named-section-content-area table.bis-browser-table td[col-id="sheetactions"] button:hover svg {
    fill: var(--action-input-hover-background-color);
  }
  gear-plan {
    position: relative;
    min-width: 120px;
    display: flex;
    flex-direction: column;
  }
  gear-plan.loading .hide-when-loading {
    display: none;
  }
  gear-plan .gear-sheet-table-area {
    box-sizing: border-box;
    min-height: 0;
    flex-shrink: 0;
    flex-grow: 999;
    max-height: 25%;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 0 auto;
    padding-bottom: 5px;
  }
  gear-plan .gear-sheet-table-area .gear-sheet-table-holder-outer {
    max-height: calc(100%);
    box-sizing: border-box;
    display: flex;
  }
  gear-plan .gear-sheet-table-area .gear-sheet-table-holder-outer .gear-sheet-table-holder {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow: auto;
  }
  gear-plan .gear-sheet-buttons-area {
    left: 0;
    bottom: 0;
    position: sticky;
    z-index: var(--zi-sets-table-buttons-area);
    box-sizing: border-box;
    text-align: left;
    margin-right: -60px;
    width: min(100%, 100vw);
    background-color: color-mix(in srgb, var(--bg-color) 80%, transparent);
    border-top: var(--standard-border);
    margin-top: 0;
    padding: 2px 2px 0 2px;
  }
  gear-plan .gear-sheet-buttons-area > * {
    margin-bottom: 2px;
    margin-right: 10px;
    pointer-events: auto;
    box-sizing: border-box;
    display: inline-block;
    padding: 1px 4px 1px 4px;
    vertical-align: top;
  }
  gear-plan .gear-sheet-midbar-area {
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    z-index: var(--zi-midbar);
    border-top: var(--thick-border);
  }
  gear-plan .gear-sheet-midbar-area .gear-sheet-toolbar-holder {
    cursor: row-resize;
  }
  gear-plan .gear-sheet-midbar-area .gear-sheet-toolbar-holder > * > * {
    cursor: auto;
  }
  gear-plan.view-only {
    --bottom-flex-basis: 70%;
  }
  gear-plan .gear-sheet-editor-area {
    flex-basis: var(--bottom-flex-basis);
    flex-basis: 100%;
    flex-shrink: 99999;
    flex-grow: 0;
    height: 60%;
    max-height: 100%;
    border-top: 2px var(--standard-border-part);
    padding-left: var(--editor-sides-padding);
    padding-right: var(--editor-sides-padding);
  }
  .gear-sheet-editor-area {
    text-align: center;
    overflow: auto;
    padding-top: var(--editor-top-padding);
    padding-bottom: var(--editor-bottom-padding);
    container-name: gear-sheet-editor-area;
    container-type: scroll-state;
  }
  .gear-sheet-editor-area table {
    text-align: left;
  }
  table.gear-items-edit-table,
  table.food-items-edit-table {
    width: 100%;
  }
  table.gear-items-edit-table > tbody > tr:has(> td),
  table.food-items-edit-table > tbody > tr:has(> td) {
    cursor: pointer;
  }
  table.gear-items-table,
  table.food-items-table {
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--shadow-color) 0 3px 5px 0;
    max-width: var(--item-table-max-width);
  }
  table.gear-items-table show-hide-button,
  table.food-items-table show-hide-button {
    margin-left: 15px;
  }
  table.gear-items-table > tbody > tr,
  table.food-items-table > tbody > tr,
  table.gear-items-table > tbody td,
  table.food-items-table > tbody td {
    height: 25px;
    box-sizing: border-box;
  }
  table.gear-items-table > tbody > tr > td,
  table.food-items-table > tbody > tr > td,
  table.gear-items-table > tbody td > td,
  table.food-items-table > tbody td > td {
    height: 25px;
    box-sizing: border-box;
  }
  table.gear-items-table > tbody th.hoverable,
  table.food-items-table > tbody th.hoverable {
    cursor: pointer;
  }
  table.gear-items-table > tbody > * > td > img,
  table.food-items-table > tbody > * > td > img {
    height: 100%;
  }
  table.gear-items-table [col-id='itemname'],
  table.food-items-table [col-id='itemname'] {
    width: var(--item-name-col-width);
    max-width: var(--item-name-col-max-width);
    min-width: 100px;
  }
  table.gear-items-table [col-id='ilvl'],
  table.food-items-table [col-id='ilvl'] {
    overflow: visible;
    text-align: center;
  }
  table.gear-items-table [col-id='icon'],
  table.food-items-table [col-id='icon'] {
    box-sizing: content-box;
    width: 23px;
    max-width: 23px;
    min-width: 23px;
  }
  table.gear-items-table th[col-id='itemname'],
  table.food-items-table th[col-id='itemname'] {
    min-width: max-content;
    position: relative;
  }
  table.gear-items-table td[col-id='mats'],
  table.food-items-table td[col-id='mats'],
  table.gear-items-table td[col-id='wd'],
  table.food-items-table td[col-id='wd'],
  table.gear-items-table td[col-id='haste'],
  table.food-items-table td[col-id='haste'] {
    text-align: center;
  }
  table.gear-items-table tr:last-child td,
  table.food-items-table tr:last-child td,
  table.gear-items-table tr:last-child th,
  table.food-items-table tr:last-child th {
    border-top: none;
  }
  table.gear-items-table input[type='number'],
  table.food-items-table input[type='number'] {
    -moz-appearance: textfield;
  }
  table.gear-items-table input[type='number']::-webkit-inner-spin-button,
  table.food-items-table input[type='number']::-webkit-inner-spin-button,
  table.gear-items-table input[type='number']::-webkit-outer-spin-button,
  table.food-items-table input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  table.gear-items-table.gear-items-edit-table tr .item-name-holder-editable,
  table.food-items-table.gear-items-edit-table tr .item-name-holder-editable,
  table.gear-items-table.food-items-edit-table tr .item-name-holder-editable,
  table.food-items-table.food-items-edit-table tr .item-name-holder-editable,
  table.gear-items-table.gear-items-edit-table tr .food-name-holder-editable,
  table.food-items-table.gear-items-edit-table tr .food-name-holder-editable,
  table.gear-items-table.food-items-edit-table tr .food-name-holder-editable,
  table.food-items-table.food-items-edit-table tr .food-name-holder-editable {
    display: flex;
    flex-direction: row;
  }
  table.gear-items-table.gear-items-edit-table tr .item-name-holder-editable span,
  table.food-items-table.gear-items-edit-table tr .item-name-holder-editable span,
  table.gear-items-table.food-items-edit-table tr .item-name-holder-editable span,
  table.food-items-table.food-items-edit-table tr .item-name-holder-editable span,
  table.gear-items-table.gear-items-edit-table tr .food-name-holder-editable span,
  table.food-items-table.gear-items-edit-table tr .food-name-holder-editable span,
  table.gear-items-table.food-items-edit-table tr .food-name-holder-editable span,
  table.food-items-table.food-items-edit-table tr .food-name-holder-editable span {
    flex-basis: 1px;
    flex-grow: 99;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 1px;
  }
  table.gear-items-table.gear-items-edit-table tr .item-name-holder-editable .remove-item-button,
  table.food-items-table.gear-items-edit-table tr .item-name-holder-editable .remove-item-button,
  table.gear-items-table.food-items-edit-table tr .item-name-holder-editable .remove-item-button,
  table.food-items-table.food-items-edit-table tr .item-name-holder-editable .remove-item-button,
  table.gear-items-table.gear-items-edit-table tr .food-name-holder-editable .remove-item-button,
  table.food-items-table.gear-items-edit-table tr .food-name-holder-editable .remove-item-button,
  table.gear-items-table.food-items-edit-table tr .food-name-holder-editable .remove-item-button,
  table.food-items-table.food-items-edit-table tr .food-name-holder-editable .remove-item-button,
  table.gear-items-table.gear-items-edit-table tr .item-name-holder-editable .remove-food-button,
  table.food-items-table.gear-items-edit-table tr .item-name-holder-editable .remove-food-button,
  table.gear-items-table.food-items-edit-table tr .item-name-holder-editable .remove-food-button,
  table.food-items-table.food-items-edit-table tr .item-name-holder-editable .remove-food-button,
  table.gear-items-table.gear-items-edit-table tr .food-name-holder-editable .remove-food-button,
  table.food-items-table.gear-items-edit-table tr .food-name-holder-editable .remove-food-button,
  table.gear-items-table.food-items-edit-table tr .food-name-holder-editable .remove-food-button,
  table.food-items-table.food-items-edit-table tr .food-name-holder-editable .remove-food-button {
    display: none;
  }
  table.gear-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-item-button,
  table.food-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-item-button,
  table.gear-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-item-button,
  table.food-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-item-button,
  table.gear-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-food-button,
  table.food-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-food-button,
  table.gear-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-food-button,
  table.food-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-food-button {
    display: block;
    padding: 0 4px 0 4px;
    margin-left: 2px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    height: min-content;
    width: min-content;
  }
  table.gear-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover,
  table.food-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover,
  table.gear-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover,
  table.food-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover,
  table.gear-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover,
  table.food-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover,
  table.gear-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover,
  table.food-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover {
    color: var(--action-input-hover-background-color);
  }
  table.gear-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover svg,
  table.food-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover svg,
  table.gear-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover svg,
  table.food-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover svg,
  table.gear-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover svg,
  table.food-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover svg,
  table.gear-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover svg,
  table.food-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover svg {
    fill: var(--action-input-hover-background-color);
  }
  table.gear-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-item-button svg,
  table.food-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-item-button svg,
  table.gear-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-item-button svg,
  table.food-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-item-button svg,
  table.gear-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-food-button svg,
  table.food-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-food-button svg,
  table.gear-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-food-button svg,
  table.food-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-food-button svg {
    fill: var(--fg-color);
  }
  table.gear-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover,
  table.food-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover,
  table.gear-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover,
  table.food-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover,
  table.gear-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover,
  table.food-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover,
  table.gear-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover,
  table.food-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover {
    fill: var(--action-input-hover-background-color);
  }
  table.gear-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover svg,
  table.food-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover svg,
  table.gear-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover svg,
  table.food-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-item-button:hover svg,
  table.gear-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover svg,
  table.food-items-table.gear-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover svg,
  table.gear-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover svg,
  table.food-items-table.food-items-edit-table tr:hover[is-selected="true"] .remove-food-button:hover svg {
    fill: var(--action-input-hover-background-color);
  }
  .left-side-gear-table,
  .right-side-gear-table {
    display: inline-block;
    flex-basis: var(--item-table-max-width);
    flex-shrink: 1;
  }
  .left-side-gear-table > table.gear-items-table,
  .right-side-gear-table > table.gear-items-table {
    margin-bottom: 10px;
  }
  .left-side-gear-table > table.gear-items-table:last-child,
  .right-side-gear-table > table.gear-items-table:last-child {
    margin-bottom: 0;
  }
  .gear-table-sides-holder {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .flex-padding-item {
    flex-grow: 0.00001;
  }
  h1.js-warning {
    color: #ff0000;
    text-decoration: underline 2px double #ff0000;
  }
  table all-slot-materia-manager {
    max-width: 100%;
    display: inline-block;
    min-height: var(--default-table-row-height);
  }
  table all-slot-materia-manager > span {
    vertical-align: middle;
    display: inline-block;
  }
  table all-slot-materia-manager.materia-slot-no-slots > span,
  table all-slot-materia-manager.materia-slot-no-equip > span {
    opacity: 50%;
  }
  slot-materia-manager.editable:hover:not(:has(slot-materia-popup:hover)) {
    background-color: var(--input-hover-background-color);
  }
  slot-materia-manager {
    cursor: pointer;
  }
  slot-materia-manager slot-materia-popup {
    cursor: default;
  }
  slot-materia-manager slot-materia-popup td:has(img),
  slot-materia-manager slot-materia-popup .materia-picker-special-button {
    cursor: pointer;
  }
  slot-materia-manager,
  single-materia-view-only {
    border-radius: 20px;
    display: inline-block;
    position: relative;
    margin-right: 5px;
    height: fit-content;
    width: 95px;
    font-weight: normal;
    vertical-align: middle;
    box-sizing: border-box;
    --image-size: 18px;
  }
  slot-materia-manager div.materia-image-holder,
  single-materia-view-only div.materia-image-holder {
    overflow: clip;
    width: var(--image-size);
    height: var(--image-size);
    padding: 0;
    margin: 0;
    border: 2px #3c623c solid;
    border-radius: 100%;
    display: inline-block;
    vertical-align: middle;
  }
  slot-materia-manager.materia-slot-overmeld div.materia-image-holder,
  single-materia-view-only.materia-slot-overmeld div.materia-image-holder {
    border: 2px #397e86 solid;
  }
  slot-materia-manager img,
  single-materia-view-only img {
    width: 100%;
    height: 100%;
    display: block;
  }
  slot-materia-manager.materia-slot-locked,
  single-materia-view-only.materia-slot-locked {
    box-shadow: 0 0 2px 2px #777 inset;
  }
  slot-materia-manager.materia-manager-active,
  single-materia-view-only.materia-manager-active {
    box-shadow: 0 0 2px 2px var(--table-selected-outline-color) inset;
  }
  slot-materia-manager > span,
  single-materia-view-only > span {
    vertical-align: middle;
    display: inline-block;
  }
  slot-materia-manager > span:first-of-type,
  single-materia-view-only > span:first-of-type {
    padding-left: 3px;
  }
  slot-materia-manager.materia-overcap > span,
  single-materia-view-only.materia-overcap > span {
    color: var(--materia-overcap);
  }
  slot-materia-manager.materia-overcap-major > span,
  single-materia-view-only.materia-overcap-major > span {
    color: var(--materia-overcap-major);
  }
  slot-materia-manager.materia-slot-full div.materia-image-holder,
  single-materia-view-only.materia-slot-full div.materia-image-holder {
    background-color: #666;
  }
  slot-materia-popup {
    position: absolute;
    z-index: var(--zi-slot-materia-popup);
    left: 0;
    box-shadow: var(--shadow-color) 0 4px 10px 0;
  }
  slot-materia-popup > table {
    padding: 0 !important;
  }
  slot-materia-popup th {
    border-top: var(--standard-border) !important;
    text-align: center;
    padding: 0 !important;
  }
  slot-materia-popup td {
    padding: 0 !important;
    z-index: var(--zi-slot-materia-popup-cell);
  }
  slot-materia-popup td img {
    width: 40px;
    height: 40px;
    display: block;
  }
  slot-materia-popup td[is-selected="true"] {
    z-index: 181;
  }
  slot-materia-popup td:first-child {
    text-align: center;
    padding: 4px !important;
  }
  slot-materia-popup td:hover img {
    filter: brightness(1.4);
  }
  slot-materia-popup .materia-picker-special-button {
    padding-top: 6px;
    padding-bottom: 6px;
    text-align: center;
  }
  slot-materia-popup .materia-picker-special-button:hover {
    background-color: var(--bg-color);
  }
  slot-materia-popup .materia-picker-special-button.materia-picker-lock {
    padding-left: 5px;
    padding-right: 8px;
  }
  slot-materia-popup .materia-picker-special-button.materia-picker-lock.unlocked {
    opacity: 0.5;
  }
  slot-materia-popup .materia-picker-special-button.materia-picker-remove svg {
    fill: #831818;
  }
  slot-materia-popup .materia-picker-special-button.materia-picker-remove:hover svg {
    fill: red;
  }
  sim-result-display {
    display: inline-block;
    width: 100%;
  }
  td.sim-column-valid {
    color: color-mix(in srgb, currentColor var(--sim-color-mix-percent), color-mix(in hsl, #00ff00 var(--sim-result-relative, 50%), #ff0000));
  }
  td.sim-column-valid.sim-column-best {
    font-weight: bold;
  }
  add-sim-dialog .modal-content-area {
    display: flex;
    flex-direction: column;
  }
  add-sim-dialog form {
    display: contents;
  }
  add-sim-dialog .table-holder {
    background-color: var(--table-bg-color);
    border-radius: var(--optional-border-radius);
    flex-basis: 300px;
    overflow-y: auto;
  }
  add-sim-dialog .table-holder table {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    width: 100%;
  }
  add-sim-dialog .table-holder table td[col-id="sim-job-icon"] {
    width: 1px;
    height: var(--default-table-row-height);
  }
  add-sim-dialog .table-holder table td[col-id="sim-job-icon"] img {
    height: 100%;
  }
  add-sim-dialog .add-sim-lower-area {
    flex-basis: 150px;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    min-width: 400px;
    min-height: 100px;
    max-width: min-content;
    white-space: pre-wrap;
    overflow-y: auto;
  }
  add-sim-dialog .add-sim-lower-area .add-sim-description {
    flex-grow: 1;
  }
  add-sim-dialog .add-sim-lower-area .add-sim-description.no-desc {
    opacity: 50%;
  }
  add-sim-dialog .add-sim-lower-area .sim-contact-info-holder {
    flex-basis: fit-content;
  }
  #sim-config-area-outer {
    margin: auto;
    width: fit-content;
  }
  #sim-config-area-outer > input,
  #sim-config-area-outer > button {
    box-shadow: var(--shadow-color) 0 3px 5px 0;
  }
  #sim-config-area-outer .sim-name-editor {
    display: block;
    margin: auto auto 10px;
  }
  #sim-config-area-outer .sim-config-area-inner {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    max-width: calc(100% - 10px);
    margin-left: auto;
    margin-right: auto;
  }
  #sim-config-area-outer .sim-config-area-inner > .named-section {
    max-height: calc(100% - 50px);
    max-width: calc(100% - 50px);
    background-color: var(--table-bg-color);
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    margin: 20px auto 20px auto;
    width: fit-content;
    height: fit-content;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    max-width: unset;
  }
  #sim-config-area-outer .sim-config-area-inner > .named-section .named-section-content-area {
    max-width: 100%;
    overflow: auto;
  }
  #sim-config-area-outer .sim-config-area-inner > .named-section .named-section-content-area {
    overflow: visible;
    overflow-x: clip;
  }
  #sim-config-area-outer .sim-config-area-inner > .named-section label[for='cycle-total-time'] {
    margin-right: 10px;
  }
  #sim-config-area-outer .sim-config-area-inner > * {
    margin-top: 10px;
  }
  #sim-config-area-outer .sim-config-area-inner .labeled-item label {
    display: block;
  }
  gear-set-editor div.gear-set-editor-button-area,
  separator-editor div.gear-set-editor-button-area,
  div.gear-set-popout-open-placeholder div.gear-set-editor-button-area {
    width: 100%;
    text-align: center;
  }
  gear-set-editor div.gear-set-editor-button-area > *,
  separator-editor div.gear-set-editor-button-area > *,
  div.gear-set-popout-open-placeholder div.gear-set-editor-button-area > * {
    box-shadow: var(--shadow-color) 0 3px 5px 0;
  }
  gear-set-editor div.gear-set-editor-button-area > .issues-button,
  separator-editor div.gear-set-editor-button-area > .issues-button,
  div.gear-set-popout-open-placeholder div.gear-set-editor-button-area > .issues-button {
    min-width: 84px;
  }
  gear-set-editor > *,
  separator-editor > *,
  div.gear-set-popout-open-placeholder > * {
    margin-bottom: 10px;
  }
  import-set-area #set-import-textarea-holder,
  import-sheet-area #set-import-textarea-holder {
    border-radius: var(--standard-border-radius);
    width: fit-content;
    height: fit-content;
    position: relative;
    margin: auto;
  }
  import-set-dialog .modal-content-area {
    width: min-content;
  }
  import-set-dialog #set-import-textarea-holder {
    position: relative;
  }
  import-set-dialog loading-blocker {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  import-set-dialog loading-blocker .loading-spinner {
    position: relative;
    top: calc(50% - 50px);
  }
  div.gear-sheet-toolbar-holder {
    min-height: 30px;
    position: relative;
    padding-left: 8px;
    padding-right: 8px;
    touch-action: pinch-zoom;
  }
  div.gear-sheet-toolbar-holder .drag-indicator {
    content: '≡';
    position: absolute;
    top: 0;
    bottom: 0;
    height: fit-content;
    margin: auto 0.25rem;
  }
  div.gear-sheet-toolbar-holder::before {
    content: '≡';
    position: absolute;
    top: 0;
    bottom: 0;
    height: fit-content;
    margin: auto 0.25rem;
    left: 0;
  }
  div.gear-sheet-toolbar-holder::after {
    content: '≡';
    position: absolute;
    top: 0;
    bottom: 0;
    height: fit-content;
    margin: auto 0.25rem;
    right: 0;
  }
  .load-bar-outer {
    border-style: solid;
    border-width: 1px;
    border-color: var(--border-color-highlight);
    border-radius: 4px;
  }
  .load-bar-inner {
    background-color: var(--border-color-highlight);
    border-radius: 3px;
  }
  .meld-solver-set {
    float: left;
    font-weight: bold;
    text-decoration: underline;
  }
  .meld-solver-area {
    white-space: pre-wrap;
  }
  .meld-solver-settings {
    float: left;
    display: flex;
    flex-direction: column;
    border-width: 1px;
    border-color: #00ff00;
  }
  .meld-solver-settings li {
    margin: 5px;
    list-style-type: none;
    float: left;
  }
  .meld-solver-settings li .meld-solver-target-gcd-input {
    max-width: 30px;
    border: var(--faint-border);
    float: left;
  }
  .meld-solver-settings li .meld-solver-target-gcd-input:disabled {
    border: var(--faint-border);
    opacity: 50%;
  }
  .meld-solver-settings li select.meld-solver-sim-dropdown {
    float: left;
    max-width: fit-content;
    width: 100%;
  }
  .meld-solver-settings li select.meld-solver-sim-dropdown option {
    padding: 5px;
  }
  .meld-solver-settings button {
    margin: 5px;
    border-width: 1px;
    border-color: #909090;
    float: left;
    height: 100%;
  }
  .gear-set-editor-toolbar {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
  }
  .gear-set-editor-toolbar > * {
    box-shadow: var(--shadow-color) 0 3px 5px 0;
  }
  .gear-set-editor-toolbar .toolbar-buttons-area {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: -3px;
    align-items: center;
    gap: 10px;
    position: relative;
  }
  .gear-set-editor-toolbar .toolbar-buttons-area .popout-area {
    position: absolute;
    top: calc(100% + 8px);
    background: var(--table-bg-color);
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
    width: max-content;
    box-shadow: var(--shadow-color) 0 12px 10px 0;
    z-index: var(--zi-toolbar-popout);
  }
  .gear-set-editor-toolbar .toolbar-buttons-area .popout-area > * {
    position: sticky;
  }
  .gear-set-editor-toolbar .toolbar-buttons-area .popout-area .materia-fill-button {
    box-sizing: content-box;
    padding: 5px 8px;
    margin-bottom: 10px;
  }
  .gear-set-editor-toolbar .toolbar-buttons-area .popout-area .materia-fill-button > svg {
    padding-right: 5px;
  }
  .gear-set-editor-toolbar .toolbar-buttons-area > button {
    height: var(--toolbar-button-size);
    border-radius: var(--toolbar-border-radius);
    display: flex;
    justify-content: center;
    padding: 2px;
    position: relative;
  }
  .gear-set-editor-toolbar .toolbar-buttons-area > button.big-text-btn {
    font-size: 30px;
    width: var(--toolbar-button-size);
    line-height: 0;
  }
  .gear-set-editor-toolbar .toolbar-buttons-area > button.popout-button {
    padding-left: 5px;
    padding-right: 5px;
  }
  .gear-set-editor-toolbar .toolbar-buttons-area > button.popout-button:active {
    border-color: #0000;
  }
  .gear-set-editor-toolbar .toolbar-buttons-area > button.popout-button[popout-active="true"] {
    background-color: var(--button-active-background-color);
  }
  .gear-set-editor-toolbar .toolbar-buttons-area > button > svg {
    margin: auto;
    width: 100%;
    height: 100%;
  }
  set-view-toolbar {
    display: contents;
  }
  set-view-toolbar set-totals-display {
    border: none;
    pointer-events: none;
    background: none;
  }
  set-view-toolbar set-totals-display div.stat-total {
    box-shadow: var(--shadow-color) 0 3px 5px 0;
    background-color: var(--table-bg-color);
  }
  div.gear-set-editor-toolbar,
  set-view-toolbar {
    width: fit-content;
    margin: auto;
    font-size: 13.333px;
  }
  div.gear-set-editor-toolbar > *,
  set-view-toolbar > * {
    box-sizing: border-box;
    min-height: 50px;
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    background-color: var(--input-background-color);
  }
  @media screen and (width <= 530px) {
    div.gear-set-editor-toolbar > *,
    set-view-toolbar > * {
      margin-left: 2px;
      margin-right: 2px;
    }
  }
  div.gear-set-editor-toolbar div.ilvl-picker-area ilvl-range-picker,
  set-view-toolbar div.ilvl-picker-area ilvl-range-picker {
    display: block;
    text-align: right;
    margin: 4px 0 4px 0;
  }
  div.gear-set-editor-toolbar div.ilvl-picker-area ilvl-range-picker span,
  set-view-toolbar div.ilvl-picker-area ilvl-range-picker span {
    font-size: 13.333px;
    padding: 5px;
  }
  div.gear-set-editor-toolbar div.ilvl-picker-area ilvl-range-picker input,
  set-view-toolbar div.ilvl-picker-area ilvl-range-picker input {
    border: var(--faint-border);
    padding: 0 0 0 0;
    width: 30px;
    text-align: center;
    margin-right: 2px;
  }
  div.gear-set-editor-toolbar materia-priority-picker,
  set-view-toolbar materia-priority-picker {
    width: fit-content;
    text-align: left;
  }
  div.gear-set-editor-toolbar materia-priority-picker div.labeled-checkbox,
  set-view-toolbar materia-priority-picker div.labeled-checkbox {
    float: right;
  }
  div.gear-set-editor-toolbar materia-priority-picker > span,
  set-view-toolbar materia-priority-picker > span {
    display: inline-block;
  }
  div.gear-set-editor-toolbar materia-priority-picker > *,
  set-view-toolbar materia-priority-picker > * {
    margin: 2px;
  }
  div.gear-set-editor-toolbar materia-priority-picker .labeled-checkbox,
  set-view-toolbar materia-priority-picker .labeled-checkbox {
    display: inline-block;
  }
  div.gear-set-editor-toolbar materia-priority-picker .min-gcd-input,
  set-view-toolbar materia-priority-picker .min-gcd-input {
    max-width: 30px;
    border: var(--faint-border);
  }
  div.gear-set-editor-toolbar materia-priority-picker materia-drag-order,
  set-view-toolbar materia-priority-picker materia-drag-order {
    display: inline-block;
  }
  div.gear-set-editor-toolbar materia-priority-picker materia-drag-order materia-dragger,
  set-view-toolbar materia-priority-picker materia-drag-order materia-dragger {
    display: inline-block;
    cursor: grab;
    user-select: none;
  }
  div.gear-set-editor-toolbar materia-priority-picker materia-drag-order materia-dragger:hover .materia-dragger-inner,
  set-view-toolbar materia-priority-picker materia-drag-order materia-dragger:hover .materia-dragger-inner {
    border-color: var(--border-color-highlight);
  }
  div.gear-set-editor-toolbar materia-priority-picker materia-drag-order materia-dragger .materia-dragger-inner,
  set-view-toolbar materia-priority-picker materia-drag-order materia-dragger .materia-dragger-inner {
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
    font-size: 12.5px;
    position: relative;
    pointer-events: none;
    padding: 4px;
    width: 25px;
    text-align: center;
  }
  div.gear-set-editor-toolbar materia-priority-picker materia-drag-order materia-dragger .materia-dragger-inner span,
  set-view-toolbar materia-priority-picker materia-drag-order materia-dragger .materia-dragger-inner span {
    margin: auto -5px auto -5px;
  }
  div.gear-set-editor-toolbar materia-priority-picker .meld-solver-tips,
  set-view-toolbar materia-priority-picker .meld-solver-tips {
    width: 200px;
    padding: 5px;
  }
  @media screen and (width <= 530px) {
    div.gear-set-editor-toolbar div.stat-tier-display,
    set-view-toolbar div.stat-tier-display {
      border: none;
      height: unset;
      min-height: unset;
      padding: 0;
      margin: 0;
    }
    div.gear-set-editor-toolbar div.stat-tier-display .single-stat-tier-display,
    set-view-toolbar div.stat-tier-display .single-stat-tier-display {
      min-width: 50px;
      --inner-padding: 0px;
      height: auto;
    }
    div.gear-set-editor-toolbar div.stat-tier-display .single-stat-tier-display .single-stat-tier-display-upper-short,
    set-view-toolbar div.stat-tier-display .single-stat-tier-display .single-stat-tier-display-upper-short {
      display: block;
    }
    div.gear-set-editor-toolbar div.stat-tier-display .single-stat-tier-display .single-stat-tier-display-upper-long,
    set-view-toolbar div.stat-tier-display .single-stat-tier-display .single-stat-tier-display-upper-long {
      display: none;
    }
    div.gear-set-editor-toolbar div.stat-tier-display .single-stat-tier-display .single-stat-tier-display-lower-right,
    set-view-toolbar div.stat-tier-display .single-stat-tier-display .single-stat-tier-display-lower-right {
      width: unset;
      display: block;
    }
  }
  div.gear-set-editor-toolbar .single-stat-tier-display,
  set-view-toolbar .single-stat-tier-display {
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
    position: relative;
    padding: 2px;
    margin: 5px 2px 5px 2px;
    display: inline-block;
    width: fit-content;
    min-width: 52px;
    transition: box-shadow var(--transition-time) linear;
    border-color: color-mix(in srgb, var(--stat-color) 20%, var(--border-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--tiering-color-mix), var(--table-bg-color));
    --inner-padding: 0px;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display.stat-tiering-clickable,
  set-view-toolbar .single-stat-tier-display.stat-tiering-clickable {
    cursor: pointer;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display.stat-tiering-unclickable,
  set-view-toolbar .single-stat-tier-display.stat-tiering-unclickable {
    cursor: default;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display .single-stat-tier-display-upper,
  set-view-toolbar .single-stat-tier-display .single-stat-tier-display-upper {
    transition: all var(--transition-time) linear;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display .single-stat-tier-display-upper.single-stat-tier-display-upper-short,
  set-view-toolbar .single-stat-tier-display .single-stat-tier-display-upper.single-stat-tier-display-upper-short {
    display: none;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display .single-stat-tier-display-upper.single-stat-tier-display-upper-long,
  set-view-toolbar .single-stat-tier-display .single-stat-tier-display-upper.single-stat-tier-display-upper-long {
    display: block;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display .number-format-perfect > div.single-stat-tier-display-upper,
  set-view-toolbar .single-stat-tier-display .number-format-perfect > div.single-stat-tier-display-upper {
    color: color-mix(in srgb, var(--stat-color) 30%, var(--stat-tiering-box-mix-color));
  }
  div.gear-set-editor-toolbar .single-stat-tier-display .number-format-perfect > div.single-stat-tier-display-lower-left,
  set-view-toolbar .single-stat-tier-display .number-format-perfect > div.single-stat-tier-display-lower-left {
    color: color-mix(in srgb, var(--stat-color) 70%, var(--stat-tiering-box-mix-color));
    line-height: 0;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display.stat-tiering-perfect,
  set-view-toolbar .single-stat-tier-display.stat-tiering-perfect {
    box-shadow: var(--perfect-tiering-box-shadow);
  }
  div.gear-set-editor-toolbar .single-stat-tier-display.stat-tiering-perfect > div.single-stat-tier-display-upper,
  set-view-toolbar .single-stat-tier-display.stat-tiering-perfect > div.single-stat-tier-display-upper {
    color: color-mix(in srgb, var(--stat-color) 30%, var(--stat-tiering-box-mix-color));
  }
  div.gear-set-editor-toolbar .single-stat-tier-display.stat-tiering-perfect > div.single-stat-tier-display-lower-left,
  set-view-toolbar .single-stat-tier-display.stat-tiering-perfect > div.single-stat-tier-display-lower-left {
    color: color-mix(in srgb, var(--stat-color) 70%, var(--stat-tiering-box-mix-color));
    line-height: 0;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display div.single-stat-tier-display-lower-left,
  set-view-toolbar .single-stat-tier-display div.single-stat-tier-display-lower-left {
    display: inline-block;
    padding-left: var(--inner-padding);
    padding-right: var(--inner-padding);
    width: 49%;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display div.single-stat-tier-display-lower-right,
  set-view-toolbar .single-stat-tier-display div.single-stat-tier-display-lower-right {
    display: inline-block;
    padding-left: var(--inner-padding);
    padding-right: var(--inner-padding);
    width: 49%;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display div.single-stat-tier-display-expansion,
  set-view-toolbar .single-stat-tier-display div.single-stat-tier-display-expansion {
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
    z-index: var(--zi-tiering-expansion);
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 130%;
    border-color: color-mix(in srgb, var(--stat-color) 20%, var(--border-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--tiering-color-mix), var(--table-bg-color));
    overflow: hidden;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display div.single-stat-tier-display-expansion .single-stat-tier-display-expansion-item,
  set-view-toolbar .single-stat-tier-display div.single-stat-tier-display-expansion .single-stat-tier-display-expansion-item {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display div.single-stat-tier-display-expansion .single-stat-tier-display-expansion-item.stat-tiering-perfect > div.single-stat-tier-display-upper,
  set-view-toolbar .single-stat-tier-display div.single-stat-tier-display-expansion .single-stat-tier-display-expansion-item.stat-tiering-perfect > div.single-stat-tier-display-upper {
    color: color-mix(in srgb, var(--stat-color) 30%, var(--stat-tiering-box-mix-color));
  }
  div.gear-set-editor-toolbar .single-stat-tier-display div.single-stat-tier-display-expansion .single-stat-tier-display-expansion-item.stat-tiering-perfect > div.single-stat-tier-display-lower-left,
  set-view-toolbar .single-stat-tier-display div.single-stat-tier-display-expansion .single-stat-tier-display-expansion-item.stat-tiering-perfect > div.single-stat-tier-display-lower-left {
    color: color-mix(in srgb, var(--stat-color) 70%, var(--stat-tiering-box-mix-color));
    line-height: 0;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display div.single-stat-tier-display-expansion .single-stat-tier-display-separator-holder,
  set-view-toolbar .single-stat-tier-display div.single-stat-tier-display-expansion .single-stat-tier-display-separator-holder {
    position: relative;
  }
  div.gear-set-editor-toolbar .single-stat-tier-display div.single-stat-tier-display-expansion .single-stat-tier-display-separator-holder .single-stat-tier-display-separator-inner,
  set-view-toolbar .single-stat-tier-display div.single-stat-tier-display-expansion .single-stat-tier-display-separator-holder .single-stat-tier-display-separator-inner {
    height: 10px;
    left: 0;
    right: 0;
    z-index: -1;
    top: -5px;
    background-color: var(--bg-color);
  }
  set-totals-display div.stat-total {
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
    padding: 2px;
    margin: 5px 2px 5px 2px;
    display: inline-block;
    width: fit-content;
    min-width: 50px;
    border-color: color-mix(in srgb, var(--stat-color) 20%, var(--border-color));
    --inner-padding: 3px;
  }
  set-totals-display div.stat-total div.single-stat-tier-display-upper {
    display: block;
  }
  set-totals-display div.stat-total div.stat-total-lower-left {
    display: inline-block;
    padding-left: var(--inner-padding);
    padding-right: var(--inner-padding);
  }
  set-totals-display div.stat-total div.stat-total-lower-right {
    display: inline-block;
    padding-left: var(--inner-padding);
    padding-right: var(--inner-padding);
  }
  set-totals-display div.stat-total.stat-total-wide {
    min-width: 90px;
  }
  set-totals-display div.stat-total.stat-total-narrow {
    min-width: 52px;
  }
  div.labeled-checkbox label {
    user-select: none;
  }
  .show-hide-parent .show-hide-button {
    display: none;
  }
  @media screen and (width <= 800px) {
    .show-hide-parent:not(.showing) > * {
      display: none;
    }
    .show-hide-parent .level-sync-info {
      display: inline-block;
    }
    .show-hide-parent .show-hide-button {
      display: revert;
    }
  }
  input.gear-items-table-relic-stat-input,
  select.gear-items-table-relic-stat-input {
    border: none;
    padding: 0 0 0 0;
    background: var(--relic-stat-input-background-color);
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    font-size: 13px;
    height: calc(100% - 4px);
  }
  input.gear-items-table-relic-stat-input.relic-validation-failed,
  select.gear-items-table-relic-stat-input.relic-validation-failed {
    box-shadow: var(--invalid-input-box-shadow);
  }
  input.gear-items-table-relic-stat-input:hover,
  select.gear-items-table-relic-stat-input:hover,
  input.gear-items-table-relic-stat-input:active,
  select.gear-items-table-relic-stat-input:active,
  input.gear-items-table-relic-stat-input:focus,
  select.gear-items-table-relic-stat-input:focus {
    background: var(--relic-stat-input-background-hover-color);
  }
  select.gear-items-table-relic-stat-input {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
  }
  body:has(> .backdrop-active) > *:not(.backdrop-active) {
    filter: saturate(20%) blur(2px);
  }
  .special-row-holder > * {
    float: right;
  }
  .special-row-holder > *:first-child {
    float: unset;
  }
  show-hide-button {
    transition: transform 0.2s;
    transform: rotate(0);
  }
  show-hide-button.hidden {
    transform: rotate(90deg);
  }
  .modal-dialog {
    position: absolute;
    margin: 0;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--zi-true-modal);
    display: flex;
    background-color: var(--modal-backdrop-color);
  }
  .modal-dialog .modal-inner {
    max-height: 95vh;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
  }
  .modal-dialog .modal-inner .modal-header {
    margin-top: 10px;
    margin-left: 40px;
    margin-right: 40px;
  }
  .modal-dialog .modal-inner .modal-content-area {
    overflow: auto;
    margin-bottom: 10px;
    padding: 5px;
  }
  .modal-dialog .modal-inner .modal-close-button {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 30px;
    padding: 0 4px 0 4px;
    margin-left: 2px;
    background: none;
    border: none;
  }
  .modal-dialog .modal-inner .modal-close-button:hover {
    color: var(--action-input-hover-background-color);
  }
  .modal-dialog .modal-inner .modal-close-button:hover svg {
    fill: var(--action-input-hover-background-color);
  }
  .modal-dialog > div {
    margin: auto;
    position: relative;
    background-color: var(--table-bg-color);
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
    border-radius: var(10px);
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    text-align: center;
    padding: 10px;
  }
  .modal-dialog > div input[type='text'] {
    width: 300px;
  }
  .modal-dialog div.lower-button-area > button {
    display: inline-block;
    margin: 5px 5px 5px 5px;
    min-width: var(--modal-bottom-button-width);
  }
  rename-dialog {
    position: absolute;
    margin: 0;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--zi-true-modal);
    display: flex;
    background-color: var(--modal-backdrop-color);
  }
  rename-dialog .modal-inner {
    max-height: 95vh;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
  }
  rename-dialog .modal-inner .modal-header {
    margin-top: 10px;
    margin-left: 40px;
    margin-right: 40px;
  }
  rename-dialog .modal-inner .modal-content-area {
    overflow: auto;
    margin-bottom: 10px;
    padding: 5px;
  }
  rename-dialog .modal-inner .modal-close-button {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 30px;
    padding: 0 4px 0 4px;
    margin-left: 2px;
    background: none;
    border: none;
  }
  rename-dialog .modal-inner .modal-close-button:hover {
    color: var(--action-input-hover-background-color);
  }
  rename-dialog .modal-inner .modal-close-button:hover svg {
    fill: var(--action-input-hover-background-color);
  }
  rename-dialog > div {
    margin: auto;
    position: relative;
    background-color: var(--table-bg-color);
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
    border-radius: var(10px);
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    text-align: center;
    padding: 10px;
  }
  rename-dialog > div input[type='text'] {
    width: 300px;
  }
  rename-dialog div.lower-button-area > button {
    display: inline-block;
    margin: 5px 5px 5px 5px;
    min-width: var(--modal-bottom-button-width);
  }
  rename-dialog textarea {
    margin: 10px;
    resize: none;
  }
  rename-dialog .modal-inner > * {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  rename-dialog form {
    width: min-content;
  }
  shortlink-modal {
    position: absolute;
    margin: 0;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--zi-true-modal);
    display: flex;
    background-color: var(--modal-backdrop-color);
  }
  shortlink-modal .modal-inner {
    max-height: 95vh;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
  }
  shortlink-modal .modal-inner .modal-header {
    margin-top: 10px;
    margin-left: 40px;
    margin-right: 40px;
  }
  shortlink-modal .modal-inner .modal-content-area {
    overflow: auto;
    margin-bottom: 10px;
    padding: 5px;
  }
  shortlink-modal .modal-inner .modal-close-button {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 30px;
    padding: 0 4px 0 4px;
    margin-left: 2px;
    background: none;
    border: none;
  }
  shortlink-modal .modal-inner .modal-close-button:hover {
    color: var(--action-input-hover-background-color);
  }
  shortlink-modal .modal-inner .modal-close-button:hover svg {
    fill: var(--action-input-hover-background-color);
  }
  shortlink-modal > div {
    margin: auto;
    position: relative;
    background-color: var(--table-bg-color);
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
    border-radius: var(10px);
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    text-align: center;
    padding: 10px;
  }
  shortlink-modal > div input[type='text'] {
    width: 300px;
  }
  shortlink-modal div.lower-button-area > button {
    display: inline-block;
    margin: 5px 5px 5px 5px;
    min-width: var(--modal-bottom-button-width);
  }
  food-stat-bonus {
    display: flex;
    flex-direction: row;
    --slash-padding: 3px;
  }
  food-stat-bonus > * {
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    display: block;
    line-height: 1;
  }
  food-stat-bonus .food-effective {
    text-align: right;
    padding-right: 4px;
    flex-shrink: 1;
  }
  food-stat-bonus .food-cap {
    text-align: left;
    flex-basis: calc(50% + 10px);
    flex-shrink: 1;
    font-weight: normal;
  }
  food-stat-bonus.food-undercapped .food-cap {
    opacity: 50%;
  }
  food-stat-bonus.food-undercapped .food-cap::before {
    content: '/';
    padding-left: var(--slash-padding);
    padding-right: var(--slash-padding);
  }
  food-stat-bonus.food-capped .food-cap {
    opacity: 50%;
    text-align: center;
  }
  table.food-items-table .food-stat-col {
    --food-stat-col-width: 80px;
    min-width: var(--food-stat-col-width);
    max-width: var(--food-stat-col-width);
    width: var(--food-stat-col-width);
    box-sizing: content-box;
  }
  table.food-items-table [col-id='itemname'] {
    width: var(--item-name-col-width);
    min-width: 100px;
    max-width: var(--item-name-col-max-width);
  }
  table.food-items-table [col-id='itemname'] div {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  table.food-items-table [col-id='icon'] {
    height: unset;
  }
  table.food-items-table [col-id='icon'] img {
    height: 27px;
  }
  table.food-items-table .food-stat-narrow {
    display: none;
  }
  @media screen and (width <= 900px) {
    table.food-items-table .food-stat-col {
      --food-stat-col-width: 40px;
    }
    table.food-items-table food-stat-bonus {
      flex-direction: column;
      padding-top: 2px;
      padding-bottom: 2px;
    }
    table.food-items-table food-stat-bonus > * {
      text-align: left;
      line-height: normal;
    }
  }
  .round-table tbody tr:first-child {
    border-top-left-radius: var(--standard-border-radius);
    border-top-right-radius: var(--standard-border-radius);
  }
  .round-table tbody tr:first-child td:first-child,
  .round-table tbody tr:first-child th:first-child {
    border-top-left-radius: var(--standard-border-radius);
  }
  .round-table tbody tr:first-child td:last-child,
  .round-table tbody tr:first-child th:last-child {
    border-top-right-radius: var(--standard-border-radius);
  }
  .round-table tbody tr:last-child {
    border-bottom-left-radius: var(--standard-border-radius);
    border-bottom-right-radius: var(--standard-border-radius);
  }
  .round-table tbody tr:last-child td:first-child,
  .round-table tbody tr:last-child th:first-child {
    border-bottom-left-radius: var(--standard-border-radius);
  }
  .round-table tbody tr:last-child td:last-child,
  .round-table tbody tr:last-child th:last-child {
    border-bottom-right-radius: var(--standard-border-radius);
  }
  gear-set-viewer {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 100px;
    display: block;
    --standard-border-radius: 10px;
    --item-table-max-width: 580px;
  }
  gear-set-viewer > h1 {
    margin-top: 0;
  }
  gear-set-viewer > h1 svg {
    padding-left: 10px;
  }
  gear-set-viewer > * {
    margin-bottom: 10px;
  }
  gear-set-viewer materia-totals-display,
  gear-set-viewer .gear-items-view-table,
  gear-set-viewer .food-view-table {
    box-shadow: var(--shadow-color) 0 3px 5px 0;
  }
  gear-set-viewer slot-materia-manager {
    cursor: default;
  }
  gear-set-viewer materia-totals-display {
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
    background-color: var(--table-bg-color);
    padding: 10px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--item-table-max-width);
    min-height: 22px;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    position: relative;
    --materia-total-cols: auto;
  }
  @media screen and (width <= 600px) {
    gear-set-viewer materia-totals-display {
      --materia-total-cols: 2;
    }
  }
  gear-set-viewer materia-totals-display .materia-totals-label {
    flex-basis: min-content;
    flex-grow: 0;
    margin: auto;
  }
  gear-set-viewer materia-totals-display .materia-totals-inner {
    flex-basis: max-content;
    flex-grow: 1;
    columns: auto;
    column-width: 150px;
    column-gap: 3px;
    column-fill: balance;
  }
  gear-set-viewer materia-totals-display .materia-totals-inner:has(:nth-last-child(4):first-child) {
    --materia-total-cols: 2;
  }
  gear-set-viewer materia-totals-display materia-count-display {
    display: block;
    padding: 3px;
  }
  gear-set-viewer materia-totals-display materia-count-display .materia-count-quantity {
    text-align: right;
    width: 30px;
    display: inline-block;
    margin-right: 3px;
    vertical-align: middle;
  }
  gear-set-viewer materia-totals-display materia-count-display single-materia-view-only {
    width: fit-content;
  }
  gear-set-viewer table tr:last-child td,
  gear-set-viewer table tr:last-child th {
    border-top: none;
  }
  gear-set-viewer table.gear-items-view-table,
  gear-set-viewer table.food-view-table {
    background-color: var(--table-bg-color);
    border: var(--standard-border);
    border-spacing: 5px;
    border-radius: var(--standard-border-radius);
    overflow: hidden;
  }
  gear-set-viewer table.gear-items-view-table > *,
  gear-set-viewer table.food-view-table > * {
    --standard-border: none;
    --thick-border: none;
    background: none;
  }
  gear-set-viewer table.gear-items-view-table td,
  gear-set-viewer table.food-view-table td,
  gear-set-viewer table.gear-items-view-table th,
  gear-set-viewer table.food-view-table th {
    border-style: none;
    background: none;
  }
  gear-set-viewer table.gear-items-view-table .stat-cell,
  gear-set-viewer table.food-view-table .stat-cell {
    border-radius: 5px;
  }
  gear-set-viewer table.gear-items-view-table tr > td[col-id='itemname'],
  gear-set-viewer table.food-view-table tr > td[col-id='itemname'] {
    padding-left: 0 !important;
  }
  gear-set-viewer table.gear-items-view-table tr > td[col-id='itemname'] .item-name-holder,
  gear-set-viewer table.food-view-table tr > td[col-id='itemname'] .item-name-holder,
  gear-set-viewer table.gear-items-view-table tr > td[col-id='itemname'] .food-name-holder,
  gear-set-viewer table.food-view-table tr > td[col-id='itemname'] .food-name-holder {
    display: flex;
    flex-direction: row;
  }
  gear-set-viewer table.gear-items-view-table tr > td[col-id='itemname'] .item-name-holder span,
  gear-set-viewer table.food-view-table tr > td[col-id='itemname'] .item-name-holder span,
  gear-set-viewer table.gear-items-view-table tr > td[col-id='itemname'] .food-name-holder span,
  gear-set-viewer table.food-view-table tr > td[col-id='itemname'] .food-name-holder span {
    flex-basis: 1px;
    flex-grow: 99;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 1px;
  }
  gear-set-viewer table.gear-items-view-table .gear-items-view-item-header,
  gear-set-viewer table.food-view-table .gear-items-view-item-header,
  gear-set-viewer table.gear-items-view-table .food-items-view-item-header,
  gear-set-viewer table.food-view-table .food-items-view-item-header {
    display: flex;
    flex-direction: row;
    gap: 3px;
    align-items: center;
    height: 16px;
  }
  gear-set-viewer table.gear-items-view-table .gear-items-view-item-header > *,
  gear-set-viewer table.food-view-table .gear-items-view-item-header > *,
  gear-set-viewer table.gear-items-view-table .food-items-view-item-header > *,
  gear-set-viewer table.food-view-table .food-items-view-item-header > * {
    display: inline-block;
  }
  gear-set-viewer table.gear-items-view-table .gear-items-view-item-header > button,
  gear-set-viewer table.food-view-table .gear-items-view-item-header > button,
  gear-set-viewer table.gear-items-view-table .food-items-view-item-header > button,
  gear-set-viewer table.food-view-table .food-items-view-item-header > button {
    --input-background-color: var(--bg-color);
  }
  gear-set-viewer table.gear-items-view-table .gear-items-view-item-header > button input,
  gear-set-viewer table.food-view-table .gear-items-view-item-header > button input,
  gear-set-viewer table.gear-items-view-table .food-items-view-item-header > button input,
  gear-set-viewer table.food-view-table .food-items-view-item-header > button input,
  gear-set-viewer table.gear-items-view-table .gear-items-view-item-header > button textarea,
  gear-set-viewer table.food-view-table .gear-items-view-item-header > button textarea,
  gear-set-viewer table.gear-items-view-table .food-items-view-item-header > button textarea,
  gear-set-viewer table.food-view-table .food-items-view-item-header > button textarea {
    background-color: var(--bg-color);
  }
  gear-set-viewer .food-view-table td.food-stat-col {
    --standard-border: 1px var(--border-style) color-mix(in srgb, var(--stat-color) 10%, var(--border-color));
    border: var(--standard-border);
    border-top: var(--standard-border) !important;
    border-radius: 5px;
  }
  gear-set-viewer .food-view-table td.food-stat-col.primary {
    --standard-border: 1px var(--border-style) color-mix(in srgb, var(--stat-color) 50%, var(--border-color));
  }
  .stat-cell {
    text-align: center;
    text-overflow: clip;
  }
  .stat-cell span {
    padding: 0 1px 0 0;
  }
  .color-stat-column.primary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary-bg), var(--table-bg-color));
  }
  .color-stat-column.secondary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary-bg), var(--table-bg-color));
  }
  .stat-crit {
    --stat-color: var(--color-crit);
  }
  .stat-crit.primary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary-bg), var(--table-bg-color));
  }
  .stat-crit.secondary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary-bg), var(--table-bg-color));
  }
  .stat-dhit {
    --stat-color: var(--color-dhit);
  }
  .stat-dhit.primary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary-bg), var(--table-bg-color));
  }
  .stat-dhit.secondary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary-bg), var(--table-bg-color));
  }
  .stat-determination {
    --stat-color: var(--color-det);
  }
  .stat-determination.primary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary-bg), var(--table-bg-color));
  }
  .stat-determination.secondary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary-bg), var(--table-bg-color));
  }
  .stat-tenacity {
    --stat-color: var(--color-tnc);
  }
  .stat-tenacity.primary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary-bg), var(--table-bg-color));
  }
  .stat-tenacity.secondary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary-bg), var(--table-bg-color));
  }
  .stat-spellspeed,
  .stat-skillspeed {
    --stat-color: var(--color-sps-sks);
  }
  .stat-spellspeed.primary,
  .stat-skillspeed.primary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary-bg), var(--table-bg-color));
  }
  .stat-spellspeed.secondary,
  .stat-skillspeed.secondary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary-bg), var(--table-bg-color));
  }
  .stat-piety {
    --stat-color: var(--color-piety);
  }
  .stat-piety.primary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-primary-bg), var(--table-bg-color));
  }
  .stat-piety.secondary {
    color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary), var(--fg-color));
    background-color: color-mix(in srgb, var(--stat-color) var(--stat-mix-secondary-bg), var(--table-bg-color));
  }
  td.stat-melded,
  td.stat-melded-overcapped,
  td.stat-melded-overcapped-major,
  td.stat-synced-down {
    box-shadow: 0 0 2px var(--materia-box-shadow-spread) color-mix(in srgb, color-mix(in srgb, var(--stat-color) 40%, var(--materia-melded-slot-blend-color)), transparent 35%) inset;
    --selection-border-opacity: 30%;
  }
  td.stat-zero {
    color: color-mix(in srgb, var(--table-bg-color) 75%, var(--fg-color));
  }
  td.primary {
    font-weight: bold;
  }
  loading-blocker {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: var(--zi-loading-blocker);
  }
  loading-blocker.with-bg {
    background-color: var(--modal-backdrop-color);
  }
  loading-blocker div.loading-spinner {
    margin: auto;
    width: 100px;
    height: 100px;
    padding-left: 10px;
    box-sizing: border-box;
  }
  loading-blocker div.loading-spinner div {
    transform-origin: 40px 40px;
    animation: spin-anim-control linear infinite;
  }
  loading-blocker div.loading-spinner div::after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: var(--loading-spinner-color);
  }
  loading-blocker.base-modal-loading-blocker .loading-spinner {
    position: relative;
    top: calc(50% - 50px);
  }
  @keyframes spin-anim-control {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  div#welcome-message {
    width: 840px;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    background-color: var(--table-bg-color);
    --input-background-color: var(--bg-color);
    max-width: calc(100% - 50px);
    margin: 20px auto 20px auto;
    padding: 10px 50px 0;
    height: 100%;
  }
  div#welcome-message input,
  div#welcome-message textarea {
    background-color: var(--bg-color);
  }
  div#welcome-message button {
    display: block;
    margin: 5px auto 20px auto;
    font-size: 30px;
    height: fit-content;
  }
  div#welcome-message h1 {
    text-align: center;
    margin: auto;
  }
  div#welcome-message li {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  div#welcome-message a:link,
  div#welcome-message a:visited,
  div#welcome-message a:active {
    color: var(--plain-link-color);
  }
  div#welcome-message a:hover {
    color: var(--plain-link-hover-color);
  }
  a:link,
  a:visited,
  a:active {
    color: var(--fg-color);
  }
  a:hover {
    color: var(--fg-color);
  }
  div.vertical-spacer {
    height: 10px;
  }
  span.like-a-button {
    display: inline-block;
    padding: var(--button-padding);
    vertical-align: top;
  }
  div.like-a-button > span {
    line-height: 0;
    display: block;
    position: relative;
    top: 50%;
  }
  .drag-handle {
    cursor: grab;
    touch-action: none;
  }
  buff-settings-area {
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
  }
  buff-settings-area table {
    border: none;
    border-collapse: separate;
    border-spacing: 0 8px;
  }
  buff-settings-area table tr {
    background-color: transparent;
  }
  buff-settings-area table tr td {
    border: none;
    border-top: var(--standard-border);
  }
  buff-settings-area table tr td:last-child {
    border-right: none;
  }
  buff-settings-area table tr:last-child {
    border-bottom: none;
  }
  .count-sim-results-area {
    width: 100%;
  }
  .count-sim-results-area > table {
    margin: auto;
    box-shadow: var(--shadow-color) 0 4px 10px 0;
  }
  .count-sim-results-area > table tbody tr:first-child {
    border-top-left-radius: var(--standard-border-radius);
    border-top-right-radius: var(--standard-border-radius);
  }
  .count-sim-results-area > table tbody tr:first-child td:first-child,
  .count-sim-results-area > table tbody tr:first-child th:first-child {
    border-top-left-radius: var(--standard-border-radius);
  }
  .count-sim-results-area > table tbody tr:first-child td:last-child,
  .count-sim-results-area > table tbody tr:first-child th:last-child {
    border-top-right-radius: var(--standard-border-radius);
  }
  .count-sim-results-area > table tbody tr:last-child {
    border-bottom-left-radius: var(--standard-border-radius);
    border-bottom-right-radius: var(--standard-border-radius);
  }
  .count-sim-results-area > table tbody tr:last-child td:first-child,
  .count-sim-results-area > table tbody tr:last-child th:first-child {
    border-bottom-left-radius: var(--standard-border-radius);
  }
  .count-sim-results-area > table tbody tr:last-child td:last-child,
  .count-sim-results-area > table tbody tr:last-child th:last-child {
    border-bottom-right-radius: var(--standard-border-radius);
  }
  .count-sim-results-area .main-results-table {
    margin-bottom: 20px;
  }
  .count-sim-results-area .main-results-table td {
    padding-left: 15px;
    padding-right: 15px;
  }
  .count-sim-results-area .main-results-table td[col-id='value'] {
    text-align: right;
  }
  div.weapon-ilvl-bypass-setting div {
    float: right;
    margin-right: 5px;
  }
  div.weapon-ilvl-bypass-setting div label {
    font-weight: normal;
  }
  fieldset {
    border: none;
  }
  .export-modal-dialog fieldset {
    text-align: left;
  }
  .export-modal-dialog .labeled-radio-button {
    display: inline-block;
    padding-right: 10px;
    padding-bottom: 8px;
  }
  .export-modal-dialog > div {
    width: min-content;
  }
  sheet-export-modal textarea,
  set-export-modal textarea {
    height: 200px;
  }
  sheet-export-modal sim-export-chooser,
  set-export-modal sim-export-chooser {
    width: fit-content;
    display: block;
    margin: auto;
  }
  sheet-export-modal sim-export-chooser .sim-export-chooser-inner,
  set-export-modal sim-export-chooser .sim-export-chooser-inner {
    max-height: 300px;
    overflow-y: auto;
    text-align: left;
  }
  .ffxiv-frameless-job-icon {
    aspect-ratio: 1;
  }
  .ffxiv-job-icon {
    display: block;
    aspect-ratio: 1;
    box-sizing: border-box;
    border-radius: 20%;
    border: 4px ridge #c47b00;
    overflow: hidden;
    font-size: 40%;
    text-align: center;
    color: white;
    background: linear-gradient(var(--role-color), color-mix(in srgb, var(--role-color) 50%, #000));
  }
  .ffxiv-job-icon::before {
    margin: auto;
    display: block;
    position: relative;
    translate: 0 -50%;
    top: 50%;
    content: var(--job-name);
  }
  .ffxiv-job-icon.ffxiv-role-tank {
    --role-color: var(--role-color-tank);
  }
  .ffxiv-job-icon.ffxiv-role-healer {
    --role-color: var(--role-color-healer);
  }
  .ffxiv-job-icon.ffxiv-role-dps {
    --role-color: var(--role-color-dps);
  }
  .ffxiv-job-icon.loaded {
    border-radius: unset;
    background: unset;
    border: none;
  }
  .ffxiv-job-icon:not(.loaded) {
    filter: saturate(40%);
  }
  .svg-glyph {
    height: 1em;
    width: 1em;
    display: inline;
    vertical-align: -0.125em;
    fill: var(--fg-color);
  }
  .svg-glyph.svg-line {
    fill: none;
    stroke: var(--fg-color);
  }
  *:focus-visible {
    outline: initial;
    box-shadow: 0 0 2px 2px var(--table-selected-outline-color);
  }
  .relic-stat-excluded {
    width: 100%;
    height: 100%;
  }
  bool-toggle {
    display: block;
    user-select: none;
    box-sizing: border-box;
    --bool-toggle-inset: 10px;
    --border-radius: 15px;
    margin: 20px;
    width: 200px;
    height: 60px;
    --bool-toggle-bg-color: var(--input-background-color);
    --bool-toggle-slider-bg-color: var(--bg-color);
  }
  bool-toggle input {
    display: none;
  }
  bool-toggle .bool-toggle-label {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--bool-toggle-bg-color);
    border-radius: calc(var(--border-radius) + var(--bool-toggle-inset));
    border: var(--standard-border);
  }
  bool-toggle .bool-toggle-inner {
    position: relative;
    left: var(--bool-toggle-inset);
    top: var(--bool-toggle-inset);
    width: calc(100% - 2 * var(--bool-toggle-inset));
    height: calc(100% - 2 * var(--bool-toggle-inset));
    box-sizing: border-box;
  }
  bool-toggle .bool-toggle-slider {
    width: calc(50% - var(--bool-toggle-inset));
    height: 100%;
    position: absolute;
    left: 0;
    transition: left 0.2s ease;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    background-color: var(--bool-toggle-slider-bg-color);
    border: var(--standard-border);
  }
  bool-toggle .bool-toggle-left,
  bool-toggle .bool-toggle-right {
    position: absolute;
    text-align: center;
    width: calc(50% - var(--bool-toggle-inset));
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }
  bool-toggle .bool-toggle-left {
    left: 0;
  }
  bool-toggle .bool-toggle-right {
    right: 0;
  }
  bool-toggle:has(input:checked) .bool-toggle-slider {
    left: calc(50% + var(--bool-toggle-inset));
  }
  bool-toggle:hover {
    --bool-toggle-bg-color: var(--input-hover-background-color);
  }
  bool-toggle:active {
    --bool-toggle-bg-color: var(--button-active-background-color);
  }
  svg.gear-set-warning-icon {
    fill: var(--issue-warning-color);
    margin-right: 5px;
  }
  svg.gear-set-error-icon {
    fill: var(--issue-error-color);
    margin-right: 5px;
  }
  .gear-set-editor-button-area svg {
    margin-right: 3px;
  }
  gear-set-issues-modal.has-issues .modal-content-area {
    text-align: left;
  }
  gear-set-issues-modal .modal-inner {
    width: 400px;
  }
  gear-set-issues-modal .modal-inner .modal-content-area .gear-set-issue-block {
    display: flex;
    margin: 25px;
  }
  gear-set-issues-modal .modal-inner .modal-content-area .gear-set-issue-block > span {
    flex-basis: fit-content;
  }
  gear-set-issues-modal .modal-inner .modal-content-area .gear-set-issue-block > svg {
    margin-right: 10px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }
  .named-section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  .named-section > h3 {
    margin-top: 0;
    margin-bottom: 18px;
  }
  .named-section-standard {
    max-height: calc(100% - 50px);
    max-width: calc(100% - 50px);
    background-color: var(--table-bg-color);
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    margin: 20px auto 20px auto;
    width: fit-content;
    height: fit-content;
    padding: 20px;
    border-radius: 10px;
  }
  .named-section-standard .named-section-content-area {
    max-width: 100%;
    overflow: auto;
  }
  #content-area > .named-section {
    max-height: calc(100% - 50px);
    width: fit-content;
    height: fit-content;
    padding: 20px;
    border-radius: 10px;
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    background-color: var(--table-bg-color);
    --input-background-color: var(--bg-color);
    max-width: calc(100% - 50px);
    margin: 20px auto 20px auto;
  }
  #content-area > .named-section .named-section-content-area {
    max-width: 100%;
    overflow: auto;
  }
  #content-area > .named-section input,
  #content-area > .named-section textarea {
    background-color: var(--bg-color);
  }
  .top-level-widget {
    border-radius: 10px;
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    background-color: var(--table-bg-color);
    --input-background-color: var(--bg-color);
    max-width: calc(100% - 50px);
    margin: 20px auto 20px auto;
  }
  .top-level-widget input,
  .top-level-widget textarea {
    background-color: var(--bg-color);
  }
  .sim-basic-result-table {
    box-shadow: var(--shadow-color) 0 4px 10px 0;
  }
  .sim-basic-result-table tbody tr:first-child {
    border-top-left-radius: var(--standard-border-radius);
    border-top-right-radius: var(--standard-border-radius);
  }
  .sim-basic-result-table tbody tr:first-child td:first-child,
  .sim-basic-result-table tbody tr:first-child th:first-child {
    border-top-left-radius: var(--standard-border-radius);
  }
  .sim-basic-result-table tbody tr:first-child td:last-child,
  .sim-basic-result-table tbody tr:first-child th:last-child {
    border-top-right-radius: var(--standard-border-radius);
  }
  .sim-basic-result-table tbody tr:last-child {
    border-bottom-left-radius: var(--standard-border-radius);
    border-bottom-right-radius: var(--standard-border-radius);
  }
  .sim-basic-result-table tbody tr:last-child td:first-child,
  .sim-basic-result-table tbody tr:last-child th:first-child {
    border-bottom-left-radius: var(--standard-border-radius);
  }
  .sim-basic-result-table tbody tr:last-child td:last-child,
  .sim-basic-result-table tbody tr:last-child th:last-child {
    border-bottom-right-radius: var(--standard-border-radius);
  }
  alt-items-modal .modal-content-area {
    width: min-content;
    max-width: 100%;
  }
  alt-items-modal table {
    width: max-content;
  }
  alt-items-modal table tr td,
  alt-items-modal table tr th {
    padding-left: 15px;
    padding-right: 15px;
  }
  alt-items-modal table tr *[col-id="icon"] {
    height: 25px;
    width: 23px;
    min-width: 23px;
    max-width: 23px;
    padding-right: 0;
    box-sizing: content-box;
  }
  alt-items-modal table tr *[col-id="icon"] img {
    height: 100%;
  }
  alt-items-modal table tr *[col-id="itemname"] {
    padding-left: 0;
  }
  .formula-top-level {
    max-height: calc(100% - 50px);
    max-width: calc(100% - 50px);
    background-color: var(--table-bg-color);
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    margin: 20px auto 20px auto;
    width: fit-content;
    height: fit-content;
    padding: 20px;
    border-radius: 10px;
    --input-background-color: var(--bg-color);
  }
  .formula-top-level .named-section-content-area {
    max-width: 100%;
    overflow: auto;
  }
  .formula-top-level input,
  .formula-top-level textarea {
    background-color: var(--bg-color);
  }
  math-area .formula-selector-area button {
    margin: 3px;
  }
  math-area .formula-selector-area button.active {
    background-color: var(--input-hover-background-color);
  }
  math-area .settings-area .generic-settings-area .vertical-labeled-input,
  math-area .settings-area .specific-settings-area .vertical-labeled-input {
    padding: 10px;
    display: inline-block;
  }
  math-area .settings-area .generic-settings-area .vertical-labeled-input input,
  math-area .settings-area .specific-settings-area .vertical-labeled-input input {
    width: 100px;
  }
  math-area .settings-area .generic-settings-area .vertical-labeled-input > *,
  math-area .settings-area .specific-settings-area .vertical-labeled-input > * {
    display: block;
  }
  button[disabled] {
    pointer-events: none;
    opacity: 50%;
  }
  settings-modal .modal-content-area {
    padding: 15px;
  }
  settings-modal .modal-content-area > * {
    display: block;
  }
  settings-modal .modal-content-area > br {
    height: 10px;
    display: unset;
  }
  settings-modal .modal-content-area #language-picker {
    width: 100%;
  }
  input {
    background: var(--input-background-color);
  }
  button.narrow-button {
    width: min-content;
    height: fit-content;
  }
  body {
    --default-gauge-color: #00000033;
  }
  .gauge-outer {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    box-sizing: border-box;
  }
  .gauge-outer.sim-gauge {
    padding: 2px 0 2px 0;
  }
  .gauge-outer.gauge-narrow {
    width: 60px;
  }
  gauge-bar {
    display: inline-block;
    overflow: hidden;
    width: 120px;
    border-radius: 20px;
    background-color: var(--default-gauge-color);
    height: calc(100% - 3px);
    border: 1px solid black;
  }
  gauge-bar.sim-gauge {
    padding: 2px 0 2px 0;
  }
  gauge-bar .gauge-bar-inner {
    height: 100%;
  }
  .icon-gauge-holder {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 0;
    box-sizing: border-box;
  }
  .icon-gauge-holder > span:empty {
    height: 100%;
    width: 16px;
    display: inline-block;
    overflow: hidden;
    flex-basis: 16px;
    flex-shrink: 0;
    flex-grow: 0;
  }
  .icon-gauge-holder > span:not(:empty) {
    flex-grow: 1;
  }
  .shape-diamond {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
  }
  .shape-circle {
    clip-path: circle();
  }
  .shape-rightchevron {
    clip-path: polygon(75% 12%, 100% 50%, 75% 88%, 0% 88%, 25% 50%, 0% 12%);
    margin-right: -2px;
  }
  .whm-gauge {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
  }
  .whm-gauge-default {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: var(--default-gauge-color);
  }
  .whm-gauge-blue {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: #02d9c3;
  }
  .whm-gauge-red {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: #ff0033;
  }
  .sch-gauge {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
  }
  .sch-gauge-default {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: var(--default-gauge-color);
  }
  .sch-gauge-active {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: #0FFF33;
  }
  .mnk-chakra-gauge {
    clip-path: circle();
  }
  .mnk-chakra-gauge-default {
    clip-path: circle();
    background-color: var(--default-gauge-color);
  }
  .mnk-chakra-gauge-red {
    clip-path: circle();
    background-color: #f32908;
  }
  .mnk-chakra-gauge-orange {
    clip-path: circle();
    background-color: #f37208;
  }
  .mnk-chakra-gauge-number {
    min-width: 50px;
  }
  .mnk-beastfury-gauge {
    clip-path: circle();
  }
  .mnk-beastfury-gauge-default {
    clip-path: circle();
    background-color: var(--default-gauge-color);
  }
  .mnk-beastfury-gauge-opo {
    clip-path: circle();
    background-color: #f796c6;
  }
  .mnk-beastfury-gauge-raptor {
    clip-path: circle();
    background-color: #cd9bff;
  }
  .mnk-beastfury-gauge-coeurl {
    clip-path: circle();
    background-color: #83ffaa;
  }
  .mnk-nadi-gauge {
    clip-path: circle();
  }
  .mnk-nadi-gauge-default {
    clip-path: circle();
    background-color: var(--default-gauge-color);
  }
  .mnk-nadi-gauge-lunar {
    clip-path: circle();
    background-color: #bd86ff;
  }
  .mnk-nadi-gauge-solar {
    clip-path: circle();
    background-color: #ffffff;
  }
  td[col-id="nadi"] {
    padding-left: 12px;
    padding-right: 12px;
  }
  .mnk-beastchakra-gauge {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
  }
  .mnk-beastchakra-gauge-default {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: var(--default-gauge-color);
  }
  .mnk-beastchakra-gauge-opo {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: #f786bd;
  }
  .mnk-beastchakra-gauge-raptor {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: #ad79d6;
  }
  .mnk-beastchakra-gauge-coeurl {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: #65b291;
  }
  .blm-element {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
  }
  .blm-element-default {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: var(--default-gauge-color);
  }
  .blm-element-fire {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: #ff4a65;
  }
  .blm-element-ice {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: #3bb0ff;
  }
  .blm-polyglot {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
  }
  .blm-polyglot-default {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: var(--default-gauge-color);
  }
  .blm-polyglot-full {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: #e06796;
  }
  .blm-paradox {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
  }
  .blm-paradox-default {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: var(--default-gauge-color);
  }
  .blm-paradox-full {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background: #ff4a65 linear-gradient(180deg, #ff4a65 0%, #fec4ff 50%, #3bb0ff 100%);
  }
  .blm-umbralhearts {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
  }
  .blm-umbralhearts-default {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: var(--default-gauge-color);
  }
  .blm-umbralhearts-full {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: #ffffff;
  }
  .blm-astralsoul {
    clip-path: polygon(75% 12%, 100% 50%, 75% 88%, 0% 88%, 25% 50%, 0% 12%);
    margin-right: -2px;
  }
  .blm-astralsoul-default {
    clip-path: polygon(75% 12%, 100% 50%, 75% 88%, 0% 88%, 25% 50%, 0% 12%);
    margin-right: -2px;
    background-color: var(--default-gauge-color);
  }
  .blm-astralsoul-full {
    clip-path: polygon(75% 12%, 100% 50%, 75% 88%, 0% 88%, 25% 50%, 0% 12%);
    margin-right: -2px;
    background-color: #ffc27a;
  }
  .vpr-rattling-gauge {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
  }
  .vpr-rattling-gauge-default {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: var(--default-gauge-color);
  }
  .vpr-rattling-gauge-full {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: #84100F;
  }
  .sam-meditation-gauge {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
  }
  .sam-meditation-gauge-default {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: var(--default-gauge-color);
  }
  .sam-meditation-gauge-full {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: #ff6723;
  }
  .gnb-cartridge {
    clip-path: circle();
  }
  .gnb-cartridge-default {
    clip-path: circle();
    background-color: var(--default-gauge-color);
  }
  .gnb-cartridge-red {
    clip-path: circle();
    background-color: #f32908;
  }
  .gnb-cartridge-orange {
    clip-path: circle();
    background-color: #f37208;
  }
  .drg-wwt {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
  }
  .drg-wwt-default {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: var(--default-gauge-color);
  }
  .drg-wwt-full {
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%, 0% 50%);
    background-color: #6003FF;
  }
  .sim-gauge.two-digit {
    --gauge-text-width: 19px;
  }
  .sim-gauge.three-digit {
    --gauge-text-width: 28px;
  }
  .sim-gauge.four-digit {
    --gauge-text-width: 37px;
  }
  .sim-gauge.five-digit {
    --gauge-text-width: 46px;
  }
  .gauge-text-label {
    min-width: var(--gauge-text-width, auto);
  }
  expandable-text p {
    margin-top: 0;
  }
  expandable-text.truncated .truncatable-text-area-inner {
    -webkit-line-clamp: var(--truncatable-line-clamp);
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    mask-image: linear-gradient(180deg, black 90%, transparent 100%);
  }
  expandable-text.truncated .truncation-expand-button {
    display: unset;
  }
  expandable-text .truncation-expand-button {
    display: none;
    margin-bottom: 10px;
  }
  .set-description-holder {
    --truncatable-line-clamp: 6;
    margin-bottom: 16px;
  }
  .set-description-holder button {
    box-shadow: var(--shadow-color) 0 3px 5px 0;
    border-radius: 5px;
  }
  .cycle-sim-results {
    display: grid;
    grid-gap: 20px;
    padding: 20px 5px 20px 5px;
  }
  .cycle-sim-results .cycle-sim-table-holder {
    background-color: var(--table-bg-color);
    border-radius: var(--standard-border-radius);
    border: var(--standard-border);
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    width: fit-content;
    margin: auto;
    padding: 10px;
    height: 100%;
    box-sizing: border-box;
  }
  .cycle-sim-results .cycle-sim-table-holder .scroll-table-holder {
    scrollbar-width: thin;
  }
  .cycle-sim-results .cycle-sim-table-holder table {
    background: none;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 0 !important;
  }
  .cycle-sim-results.cycle-sim-results-full {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    max-width: max-content;
    margin: auto;
  }
  .cycle-sim-results.cycle-sim-results-full.cycle-sim-results-multirotation {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
  }
  .cycle-sim-results.cycle-sim-results-full.cycle-sim-results-multirotation .cycle-sim-abilities-holder {
    grid-column-end: span 2;
    min-height: 100px;
  }
  @media screen and (width <= 625px) {
    .cycle-sim-results.cycle-sim-results-full.cycle-sim-results-multirotation {
      grid-template-columns: 100%;
      grid-template-rows: auto 1fr;
    }
    .cycle-sim-results.cycle-sim-results-full.cycle-sim-results-multirotation .cycle-sim-main-holder {
      display: none;
    }
    .cycle-sim-results.cycle-sim-results-full.cycle-sim-results-multirotation .cycle-sim-abilities-holder {
      grid-column-end: span 1;
      min-height: 100px;
    }
  }
  .cycle-sim-results.cycle-sim-results-full.cycle-sim-results-onerotation {
    grid-template-rows: auto 1fr;
    grid-template-columns: 100%;
  }
  .cycle-sim-results.cycle-sim-results-full.cycle-sim-results-onerotation .cycle-sim-abilities-holder {
    grid-column-end: span 1;
  }
  .cycle-sim-results.cycle-sim-results-full .cycle-sim-abilities-holder {
    max-width: 100%;
    overflow: auto;
  }
  .cycle-sim-results.cycle-sim-results-full .cycle-sim-abilities-holder .scroll-table-holder {
    overflow-x: auto;
    min-height: 100%;
    height: 100px;
  }
  .cycle-sim-results.cycle-sim-results-full .cycle-sim-rotations-holder {
    min-height: 0;
  }
  .cycle-sim-results.cycle-sim-results-full .cycle-sim-rotations-holder .scroll-table-holder {
    min-height: 100%;
    max-height: 150px;
  }
  .cycle-sim-results.cycle-sim-results-full .cycle-sim-rotations-holder td {
    cursor: pointer;
  }
  .cycle-sim-results.cycle-sim-results-full .cycle-sim-rotations-holder th {
    text-align: center;
  }
  .cycle-sim-results.cycle-sim-results-full .cycle-sim-rotations-holder td[col-id="dps"] {
    min-width: 85px;
    text-align: right;
  }
  .cycle-sim-results.cycle-sim-results-full .cycle-sim-main-holder > table > * > tr > td {
    width: 150px;
  }
  .cycle-sim-results.cycle-sim-results-full .scroll-table-holder {
    overflow-y: auto;
    min-height: 0;
    scrollbar-gutter: stable;
  }
  .cycle-sim-results.cycle-sim-results-full .scroll-table-holder > table > * > tr > th {
    position: sticky;
    top: 0;
    z-index: var(--zi-sets-table-header-row);
    background: color-mix(in srgb, var(--table-bg-color) 80%, transparent);
  }
  .row-overlay-link {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .validating-form {
    position: relative;
  }
  .validating-form .validation-message-holder {
    display: none;
    position: absolute;
    width: 100%;
    height: min-content;
    box-sizing: border-box;
    translate: 0 -100%;
    background-color: color-mix(in srgb, var(--bg-color) 90%, transparent);
    box-shadow: var(--issue-error-color) 0 0 5px 2px;
    border-radius: var(--standard-border-radius);
    padding: 10px;
  }
  .validating-form .validation-message-holder.failed {
    display: block;
    color: var(--fg-color);
  }
  .validating-form .validation-message-close {
    float: right;
  }
  body:not([data-accountstate='logged-in-verified']) .require-account-state-verified {
    display: none;
  }
  body:not([data-accountstate='logged-in-unverified']) .require-account-state-unverified {
    display: none;
  }
  body:not([data-accountstate='not-logged-in']) .require-account-state-logged-out {
    display: none;
  }
  body:not([data-accountstate='not-loaded']) .require-account-state-not-loaded {
    display: none;
  }
  button.async-action-button {
    position: relative;
  }
  button.async-action-button .loading-pane {
    display: none;
    position: absolute;
    inset: 0;
  }
  button.async-action-button.in-progress {
    color: transparent;
    cursor: wait;
  }
  button.async-action-button.in-progress .loading-pane {
    display: block;
    color: var(--fg-color);
  }
  .stat-cell,
  .stat-cell-header {
    opacity: 1;
  }
}
@layer modern {
  body.modern {
    --border-color: #00000000;
    --border-style: none;
    --table-extra-padding: 10px;
    --optional-border-radius: 10px;
    --perfect-tiering-box-shadow: none;
    --border-color-input: #0000;
    --tiering-color-mix: 5%;
    --top-nav-size: 40px;
    --transition-props: 0.1s linear;
  }
  body.modern input {
    border: none !important;
  }
  body.modern table {
    border-radius: 10px;
    padding: var(--table-extra-padding);
    background-color: var(--table-bg-color);
  }
  body.modern table.gear-items-view-table,
  body.modern table.food-items-view-table {
    padding: 5px;
  }
  body.modern table.gear-items-view-table .custom-table-header-row,
  body.modern table.food-items-view-table .custom-table-header-row {
    vertical-align: bottom;
    height: min-content;
  }
  body.modern table.gear-plan-table {
    border-radius: 0;
    --table-extra-padding: 0px;
    --table-top-gradient: 8px;
  }
  body.modern table.gear-plan-table tr td[col-id="actions"] button {
    opacity: 10%;
  }
  body.modern table.gear-plan-table tr div.spacer-row {
    height: var(--table-top-gradient);
  }
  body.modern table.gear-plan-table tr:first-child {
    background: transparent;
  }
  body.modern table.gear-plan-table tr:first-child th:first-child > *:first-child::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -999;
    background: linear-gradient(to top, var(--blended-bg) 0%, var(--blended-bg-50) calc(var(--table-top-gradient) * 0.3), var(--default-table-bg-color) var(--table-top-gradient));
    top: 100%;
    height: var(--table-top-gradient);
    pointer-events: none;
    width: 100vw;
  }
  body.modern table.gear-plan-table tr:first-child th {
    --blended-bg: rgb(from var(--table-bg-color) r g b / 0);
    --blended-bg-50: rgb(from var(--table-bg-color) r g b / 50%);
  }
  body.modern table.gear-plan-table tr:first-child th span.header-cell-detail-gear {
    bottom: var(--table-top-gradient);
  }
  body.modern table.gear-plan-table tr:hover td[col-id="actions"] button,
  body.modern table.gear-plan-table tr[is-selected="true"] td[col-id="actions"] button,
  body.modern table.gear-plan-table tr.dragging td[col-id="actions"] button {
    opacity: 80%;
  }
  body.modern table.gear-items-table > tbody > tr:first-child > th,
  body.modern table.food-items-table > tbody > tr:first-child > th {
    border-top-left-radius: var(--standard-border-radius);
    border-top-right-radius: var(--standard-border-radius);
  }
  body.modern table.gear-items-table > tbody > tr > th[col-id],
  body.modern table.food-items-table > tbody > tr > th[col-id] {
    font-size: small;
    text-align: center;
  }
  body.modern table.gear-items-table > tbody > tr > th[col-id][col-id='itemname'],
  body.modern table.food-items-table > tbody > tr > th[col-id][col-id='itemname'] {
    text-align: left;
  }
  body.modern table.gear-items-table > tbody > tr > *,
  body.modern table.food-items-table > tbody > tr > * {
    padding-left: 5px;
    padding-right: 5px;
  }
  body.modern table.gear-items-table > tbody > tr:nth-child(2),
  body.modern table.food-items-table > tbody > tr:nth-child(2) {
    position: sticky;
    z-index: 99;
    top: -8px;
    background-color: transparent;
  }
  @container gear-sheet-editor-area scroll-state(stuck: top) {
  }
  body.modern table.gear-items-table > tbody > tr:nth-child(2) > th,
  body.modern table.food-items-table > tbody > tr:nth-child(2) > th {
    --blended-bg: rgb(from var(--table-bg-color) r g b / 0);
    background: linear-gradient(to top, var(--blended-bg) 0%, var(--table-bg-color) 6px);
  }
  body.modern table.gear-items-table > tbody > tr:nth-child(2) > th:first-child::before,
  body.modern table.food-items-table > tbody > tr:nth-child(2) > th:first-child::before {
    content: '';
  }
  body.modern.light-mode {
    --bg-color: #e5dad7;
    --input-hover-background-color: #ddb581;
  }
  body.modern:not(.light-mode) {
    --default-table-bg-color: #24242c;
    --table-bg-color: var(--default-table-bg-color);
    --input-background-color: var(--table-bg-color);
  }
  body.modern .gear-sheet-midbar-area {
    background-color: var(--input-background-color);
  }
  body.modern .gear-sheet-midbar-area button,
  body.modern .gear-sheet-midbar-area select {
    --input-background-color: var(--bg-color);
  }
  body.modern gear-set-editor table all-slot-materia-manager {
    padding-top: 5px;
  }
  body.modern materia-dragger:hover {
    --stat-mix-secondary-bg: 20%;
  }
  body.modern .modal-dialog .modal-inner {
    background-color: var(--bg-color);
  }
  body.modern.top-menu-hidden div#main-menu-area {
    display: initial;
    max-height: 0;
    margin-bottom: 0;
  }
  body.modern.top-menu-hidden div#main-menu-area div#main-menu-area-inner {
    bottom: var(--top-nav-size);
  }
  body.modern div#main-menu-area {
    background: none;
    box-shadow: none;
    transition: max-height var(--transition-props);
    max-height: var(--top-nav-size);
  }
  body.modern div#main-menu-area div#main-menu-area-inner {
    box-shadow: var(--shadow-color) 0 3px 5px 0;
    width: fit-content;
    display: flex;
    align-items: normal;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--table-bg-color);
    --mmai-border-radius: 10px;
    border-bottom-left-radius: var(--mmai-border-radius);
    border-bottom-right-radius: var(--mmai-border-radius);
    padding-left: var(--mmai-border-radius);
    padding-right: var(--mmai-border-radius);
    position: relative;
    transition: bottom var(--transition-props);
    bottom: 0;
  }
  @media (width < 650px) {
    body.modern div#main-menu-area div#main-menu-area-inner a span {
      display: none;
    }
    body.modern div#main-menu-area div#main-menu-area-inner .svg-glyph {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
  body.modern div#main-menu-area div#main-menu-area-inner .svg-glyph {
    scale: 1.5;
    padding-left: 5px;
    padding-right: 5px;
  }
  body.modern div#main-menu-area div#main-menu-area-inner .svg-glyph:only-child {
    padding-left: 0;
    padding-right: 0;
  }
  body.modern div#main-menu-area div#main-menu-area-inner .svg-glyph.svg-bigger {
    scale: 2;
  }
  body.modern .gear-sheet-table-holder-outer {
    padding: 5px 5px;
    border-radius: 10px;
    margin: 5px;
    background-color: var(--table-bg-color);
    box-shadow: var(--shadow-color) 0 3px 5px 0;
  }
  body.modern .gear-sheet-table-area {
    margin-bottom: 5px;
  }
  body.modern button#show-hide-menu-button,
  body.modern button#help-button {
    box-shadow: var(--shadow-color) 0 3px 5px 0;
  }
  body.modern .gear-sheet-buttons-area {
    min-width: 100%;
    max-width: min(100%, 100vw);
    width: min-content;
    --input-background-color: var(--bg-color);
    background: linear-gradient(to bottom, transparent 0%, var(--table-bg-color) 10px);
    padding: 12px 2px 0 2px;
  }
  body.modern .gear-sheet-buttons-area input,
  body.modern .gear-sheet-buttons-area textarea {
    background-color: var(--bg-color);
  }
  body.modern .gear-sheet-buttons-area:not(.showing) {
    pointer-events: none;
  }
  @media screen and (width <= 800px) {
    body.modern .gear-sheet-buttons-area:not(.showing) {
      background: none;
    }
  }
  body.modern .gear-sheet-buttons-area > * {
    height: 25px;
    padding-left: 7px;
    padding-right: 7px;
  }
  body.modern .gear-sheet-buttons-area > *:is(select) {
    padding-right: 0;
  }
  body.modern .gear-sheet-buttons-area > * .svg-glyph {
    padding-right: 3px;
  }
  body.modern slot-materia-popup {
    border-radius: 10px;
    overflow: hidden;
  }
  body.modern div.gear-set-editor-toolbar > * {
    box-shadow: none;
    padding-left: 5px;
    padding-right: 5px;
  }
  body.modern set-view-toolbar set-totals-display div.stat-total {
    background-color: color-mix(in srgb, var(--stat-color) 6%, var(--table-bg-color));
    padding-left: 6px;
    padding-right: 6px;
    margin-left: 4px;
    margin-right: 4px;
    box-sizing: content-box;
  }
  body.modern .gear-set-editor-toolbar .single-stat-tier-display {
    background-color: color-mix(in srgb, var(--stat-color) 5%, var(--table-bg-color));
    box-sizing: border-box;
    padding: 4px;
    min-height: var(--toolbar-button-size);
    border-radius: var(--toolbar-border-radius);
  }
  body.modern .gear-set-editor-toolbar .single-stat-tier-display.stat-tiering-perfect {
    background-color: color-mix(in srgb, var(--stat-color) 13%, var(--table-bg-color));
  }
  body.modern .gear-set-editor-toolbar .toolbar-buttons-area .popout-area {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  body:not(.modern) table.gear-plan-table tr:has(div.spacer-row) {
    display: none;
  }
  #content-area > .my-sheets-section .named-section-content-area table.gear-sheets-table {
    padding-top: 0;
  }
}
@layer responsive {
  .embed-narrow-only {
    display: none;
  }
  .narrow-only {
    display: none;
  }
  @media (width < 675px) {
    body:not(.embed-view) .gear-sheet-editor-area {
      scrollbar-width: thin;
    }
    body:not(.embed-view) .narrow-only {
      display: unset;
    }
    body:not(.embed-view) .wide-only {
      display: none;
    }
    body:not(.embed-view) gear-set-viewer .stat-cell,
    body:not(.embed-view) gear-set-viewer .stat-cell-header {
      padding: 2px;
    }
    body:not(.embed-view) .col-zero-stat {
      display: none;
    }
    body:not(.embed-view).top-menu-hidden:has(gear-plan.view-only) #help-button-area {
      display: none;
    }
    body:not(.embed-view).top-menu-hidden gear-plan.view-only .gear-sheet-table-holder-outer {
      padding: 0;
      margin: 0;
    }
    body:not(.embed-view).top-menu-hidden gear-plan.view-only .gear-sheet-table-area {
      padding: 0;
      margin: 0;
    }
    body:not(.embed-view).top-menu-hidden gear-plan.view-only .gear-plan-table {
      --action-col-width: 30px;
    }
    body:not(.embed-view) gear-plan.view-only {
      --editor-sides-padding: 0;
    }
    body:not(.embed-view) gear-plan.view-only gear-set-viewer {
      padding: 10px 0 100px;
      --item-table-max-width: 800px;
    }
    body:not(.embed-view) gear-plan.view-only gear-set-viewer table.gear-items-table,
    body:not(.embed-view) gear-plan.view-only gear-set-viewer table.food-view-table,
    body:not(.embed-view) gear-plan.view-only gear-set-viewer materia-totals-display {
      border-radius: 0;
    }
    body:not(.embed-view) gear-plan.view-only set-totals-display {
      display: none;
    }
  }
}
@layer embed {
  body.embed-view #embed-top-level {
    overflow: auto;
    text-align: center;
    min-height: 100%;
    position: relative;
  }
  body.embed-view #embed-top-level > div.gear-sheet-editor-area {
    box-sizing: border-box;
  }
  body.embed-view #embed-top-level set-totals-display {
    display: block;
  }
  body.embed-view #embed-top-level set-totals-display div.stat-total {
    background-color: var(--table-bg-color);
    margin-top: 5px;
    margin-bottom: 0;
    box-shadow: var(--shadow-color) 0 3px 5px 0;
  }
  body.embed-view #embed-top-level set-totals-display div.stat-total.stat-dhit {
    min-width: 52px;
  }
  body.embed-view #embed-top-level set-totals-display div.stat-total.stat-dhit div.stat-total-lower-right {
    display: none;
  }
  body.embed-view a.embed-open-full-link {
    display: block;
    box-shadow: var(--shadow-color) 0 3px 5px 0;
    height: fit-content;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--table-bg-color);
    --mmai-border-radius: 10px;
    border-bottom-left-radius: var(--mmai-border-radius);
    border-bottom-right-radius: var(--mmai-border-radius);
    min-width: max-content;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    width: 400px;
    text-align: center;
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: var(--zi-show-hide-menu-button);
  }
  body.embed-view a.embed-open-full-link:hover {
    background-color: var(--input-hover-background-color);
  }
  body.embed-view a.embed-open-full-link:link {
    text-decoration: none;
  }
  body.embed-view table tr:last-child td,
  body.embed-view table tr:last-child th {
    border-top: none;
  }
  body.embed-view table.gear-items-view-table,
  body.embed-view table.food-view-table {
    border-spacing: 2px;
    padding: 3px;
  }
  body.embed-view table slot-materia-manager {
    margin-right: 0;
    width: 90px;
  }
  @media (width <= 1100px) {
    body.embed-view .col-zero-stat {
      display: none;
    }
    body.embed-view .stat-cell,
    body.embed-view .stat-cell-header {
      padding: 0;
      opacity: 75%;
    }
    body.embed-view table slot-materia-manager {
      font-size: small;
      width: 75px;
    }
  }
  @media (width < 500px) {
    body.embed-view {
      width: 125vw;
      transform: scale(80%);
      min-height: 125vh;
      max-height: 125vh;
    }
    body.embed-view gear-set-viewer {
      padding: 0;
      --item-table-max-width: 800px;
    }
    body.embed-view gear-set-viewer table.gear-items-table,
    body.embed-view gear-set-viewer table.food-view-table {
      border-radius: 0;
    }
    body.embed-view .narrow-only,
    body.embed-view .embed-narrow-only {
      display: unset;
    }
    body.embed-view .wide-only,
    body.embed-view .embed-wide-only {
      display: none;
    }
    body.embed-view table slot-materia-manager {
      font-size: unset;
      width: 85px;
    }
  }
  @media (width < 380px) {
    body.embed-view {
      width: 150vw;
      transform: scale(calc(2 / 3));
      min-height: 150vh;
      max-height: 150vh;
    }
  }
  @media (width < 330px) {
    body.embed-view .stat-cell,
    body.embed-view .stat-cell-header {
      display: none;
    }
  }
  @media (width > 850px) {
    body.embed-view gear-set-viewer .gear-table-sides-holder {
      --item-table-max-width: min(600px, calc(50vw - 20px));
    }
  }
}
@layer popout {
  body.popout-view #popout-top-level {
    text-align: center;
    min-height: 100%;
    position: relative;
  }
  body.popout-view #popout-top-level > div.gear-sheet-editor-area {
    box-sizing: border-box;
  }
  body.popout-view #popout-top-level popout-editor {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  body.popout-view #popout-top-level popout-editor .popup-main-area {
    overflow: auto;
    height: 100%;
    padding-top: 8px;
  }
  body.popout-view #popout-top-level .popup-toolbar-area {
    box-shadow: var(--shadow-color) 0 4px 10px 0;
    position: relative;
    z-index: var(--zi-toolbar-popout);
  }
  body.popout-view #popout-top-level set-totals-display {
    display: block;
  }
  body.popout-view #popout-top-level set-totals-display div.stat-total {
    background-color: var(--table-bg-color);
    margin-top: 5px;
    margin-bottom: 0;
    box-shadow: var(--shadow-color) 0 3px 5px 0;
  }
  body.popout-view #popout-top-level set-totals-display div.stat-total.stat-dhit {
    min-width: 52px;
  }
  body.popout-view #popout-top-level set-totals-display div.stat-total.stat-dhit div.stat-total-lower-right {
    display: none;
  }
  body.popout-view a.embed-open-full-link {
    display: block;
    box-shadow: var(--shadow-color) 0 3px 5px 0;
    height: fit-content;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--table-bg-color);
    --mmai-border-radius: 10px;
    border-bottom-left-radius: var(--mmai-border-radius);
    border-bottom-right-radius: var(--mmai-border-radius);
    min-width: max-content;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    width: 400px;
    text-align: center;
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: var(--zi-show-hide-menu-button);
  }
  body.popout-view a.embed-open-full-link:hover {
    background-color: var(--input-hover-background-color);
  }
  body.popout-view a.embed-open-full-link:link {
    text-decoration: none;
  }
  body.popout-view table tr:last-child td,
  body.popout-view table tr:last-child th {
    border-top: none;
  }
  body.popout-view table.gear-items-view-table,
  body.popout-view table.food-view-table {
    border-spacing: 2px;
    padding: 3px;
  }
  body.popout-view table slot-materia-manager {
    margin-right: 0;
    width: 90px;
  }
  @media (width < 500px) {
    body.popout-view {
      width: 125vw;
      transform: scale(80%);
      min-height: 125vh;
      max-height: 125vh;
    }
    body.popout-view gear-set-viewer,
    body.popout-view gear-set-editor {
      padding: 0;
      --item-table-max-width: 800px;
    }
    body.popout-view gear-set-viewer table.gear-items-table,
    body.popout-view gear-set-editor table.gear-items-table,
    body.popout-view gear-set-viewer table.food-items-table,
    body.popout-view gear-set-editor table.food-items-table {
      border-radius: 0;
    }
    body.popout-view .narrow-only,
    body.popout-view .embed-narrow-only {
      display: unset;
    }
    body.popout-view .wide-only,
    body.popout-view .embed-wide-only {
      display: none;
    }
    body.popout-view table slot-materia-manager {
      font-size: unset;
      width: 85px;
    }
  }
  @media (width < 380px) {
    body.popout-view {
      width: 150vw;
      transform: scale(calc(2 / 3));
      min-height: 150vh;
      max-height: 150vh;
    }
  }
  @media (width < 330px) {
    body.popout-view .stat-cell,
    body.popout-view .stat-cell-header {
      display: none;
    }
  }
  @media (width > 850px) {
    body.popout-view gear-set-viewer .gear-table-sides-holder {
      --item-table-max-width: min(600px, calc(50vw - 20px));
    }
  }
}
@layer ads {
  .switch-nitro-color {
    background-color: var(--bg-color) !important;
    color: var(--fg-color) !important;
  }
  .switch-nitro-color * {
    color: var(--fg-color) !important;
  }
  div#nitropay-ccpa-modal {
    background-color: var(--bg-color) !important;
    color: var(--fg-color) !important;
  }
  div#nitropay-ccpa-modal * {
    color: var(--fg-color) !important;
  }
  div#ncmp__tool div.ncmp__banner-web {
    background-color: var(--bg-color) !important;
    color: var(--fg-color) !important;
  }
  div#ncmp__tool div.ncmp__banner-web * {
    color: var(--fg-color) !important;
  }
  body:not(.light-mode) div#nitropay-ccpa-modal img {
    filter: invert();
  }
  body:not(.light-mode) div#ncmp__modal div.ncmp__modal-web {
    filter: invert() hue-rotate(180deg);
  }
  .extra-information-link:not(:empty) {
    display: block;
  }
  .extra-information-link:empty {
    display: none;
  }
  .extra-information-link button {
    all: inherit;
    cursor: pointer;
    text-decoration: underline;
    margin: auto;
  }
  #fallback-privacy-area {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: var(--table-bg-color);
    padding: 2px 4px 2px 2px;
    border-top-right-radius: 6px;
    z-index: var(--zi-privacy-link);
  }
  #fallback-privacy-area > * {
    display: inline-block !important;
  }
  #fallback-privacy-area span.extra-information-link:empty,
  #fallback-privacy-area div.extra-information-link:empty {
    display: none !important;
  }
  #fallback-privacy-area span.extra-information-link.extra-information-link::before,
  #fallback-privacy-area div.extra-information-link.extra-information-link::before {
    content: ' - ';
    padding-left: 5px;
  }
  .collapse-vertical {
    min-height: 50px !important;
  }
}
.compat-checker-common svg.error {
  fill: var(--issue-error-color);
}
.compat-checker-common svg.warning {
  fill: var(--issue-warning-color);
}
compat-checker-overview-modal svg.error {
  fill: var(--issue-error-color);
}
compat-checker-overview-modal svg.warning {
  fill: var(--issue-warning-color);
}
compat-checker-overview-modal .set-compat-good {
  opacity: 0.5;
}
compat-checker-overview-modal .description {
  width: min-content;
  min-width: 100%;
  display: block;
}
compat-checker-overview-modal table {
  min-width: 100%;
  max-width: 600px;
}
compat-checker-overview-modal table tr {
  height: 30px;
}
compat-checker-overview-modal table tr button {
  --input-background-color: var(--bg-color);
  font-size: unset;
  box-sizing: content-box;
  padding: 0 5px;
  min-width: 80px;
}
compat-checker-overview-modal table tr button input,
compat-checker-overview-modal table tr button textarea {
  background-color: var(--bg-color);
}
compat-checker-overview-modal table tr button > svg {
  padding-right: 5px;
}
compat-checker-overview-modal table tr td[col-id="set"] {
  max-width: 300px;
}
compat-checker-set-modal svg.error {
  fill: var(--issue-error-color);
}
compat-checker-set-modal svg.warning {
  fill: var(--issue-warning-color);
}
compat-checker-set-modal .modal-inner {
  max-width: 800px;
}
compat-checker-set-modal .modal-inner table {
  min-width: 100%;
}
compat-checker-set-modal .modal-inner table td,
compat-checker-set-modal .modal-inner table th {
  padding: 2px 8px;
}
custom-item-popup table th,
custom-food-popup table th {
  text-align: center;
}
custom-item-popup table th .no-items-message,
custom-food-popup table th .no-items-message {
  font-weight: normal;
}
custom-item-popup table td input[type="text"],
custom-food-popup table td input[type="text"],
custom-item-popup table td input[type="number"],
custom-food-popup table td input[type="number"],
custom-item-popup table td select,
custom-food-popup table td select {
  box-sizing: border-box;
  max-width: 100%;
  border: 2px solid transparent;
  padding: 0 0 0 0;
  background: var(--relic-stat-input-background-color);
  text-align: center;
}
custom-item-popup table td input[type="text"]input,
custom-food-popup table td input[type="text"]input,
custom-item-popup table td input[type="number"]input,
custom-food-popup table td input[type="number"]input,
custom-item-popup table td selectinput,
custom-food-popup table td selectinput {
  width: unset !important;
}
custom-item-popup table td input[type="text"]:hover,
custom-food-popup table td input[type="text"]:hover,
custom-item-popup table td input[type="number"]:hover,
custom-food-popup table td input[type="number"]:hover,
custom-item-popup table td select:hover,
custom-food-popup table td select:hover,
custom-item-popup table td input[type="text"]:active,
custom-food-popup table td input[type="text"]:active,
custom-item-popup table td input[type="number"]:active,
custom-food-popup table td input[type="number"]:active,
custom-item-popup table td select:active,
custom-food-popup table td select:active,
custom-item-popup table td input[type="text"]:focus,
custom-food-popup table td input[type="text"]:focus,
custom-item-popup table td input[type="number"]:focus,
custom-food-popup table td input[type="number"]:focus,
custom-item-popup table td select:focus,
custom-food-popup table td select:focus {
  background: var(--relic-stat-input-background-hover-color);
}
custom-item-popup table td select,
custom-food-popup table td select {
  width: 100%;
}
custom-item-popup .notes-area,
custom-food-popup .notes-area {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
custom-item-popup:not(.show-all-stats) th.irrelevant-stat,
custom-food-popup:not(.show-all-stats) th.irrelevant-stat,
custom-item-popup:not(.show-all-stats) td.irrelevant-stat,
custom-food-popup:not(.show-all-stats) td.irrelevant-stat {
  display: none;
}
sim-result-detail-display {
  margin: auto;
  display: block;
  width: fit-content;
}
.gear-sheet-editor-area sim-result-detail-display {
  width: 100%;
  height: 100%;
}
meld-solver-result-dialog .meld-solver-result {
  --img-col-width: 40px;
  --bonus-col-width: 1fr;
  --count-col-width: 50px;
  --arrow-col-width: 60px;
  display: grid;
  grid-template-columns: var(--img-col-width) var(--bonus-col-width) var(--count-col-width) var(--arrow-col-width) var(--img-col-width) var(--bonus-col-width) var(--count-col-width);
  gap: 15px 5px;
}
meld-solver-result-dialog .meld-solver-result span.arrow {
  margin: 10px;
  font-size: xx-large;
}
meld-solver-result-dialog .meld-solver-result .meld-results-arrow {
  grid-column: 4;
  grid-row: 1/-1;
}
meld-solver-result-dialog .meld-solver-result .meld-solver-result-set-sim {
  color: color-mix(in srgb, currentColor var(--sim-color-mix-percent), color-mix(in hsl, #00ff00 var(--sim-result-relative, 50%), #ff0000));
}
meld-solver-result-dialog .meld-solver-result .sim-best {
  font-weight: bold;
}
meld-solver-result-dialog .meld-solver-result .cols-left {
  grid-column: 1 / span 3;
}
meld-solver-result-dialog .meld-solver-result .cols-right {
  grid-column: 5 / span 3;
}
meld-solver-result-dialog .meld-solver-result .cols-middle {
  grid-column: 4;
}
meld-solver-result-dialog .meld-solver-result .solve-result-mat-entry-holder {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
meld-solver-result-dialog .meld-solver-result .solve-result-mat-entry-holder .meld-solver-result-materia-entry {
  display: contents;
  --image-size: 25px;
}
meld-solver-result-dialog .meld-solver-result .solve-result-mat-entry-holder .meld-solver-result-materia-entry .meld-solver-result-image {
  grid-column: 1;
  overflow: clip;
  width: var(--image-size);
  height: var(--image-size);
  margin-right: 3%;
  border-radius: 100%;
  text-align: right;
  margin-left: auto;
}
meld-solver-result-dialog .meld-solver-result .solve-result-mat-entry-holder .meld-solver-result-materia-entry .meld-solver-result-image img {
  height: 100%;
  display: block;
  aspect-ratio: 1;
}
meld-solver-result-dialog .meld-solver-result .solve-result-mat-entry-holder .meld-solver-result-materia-entry .meld-solver-result-materia-entry-stat {
  text-align: left;
  grid-column: 2;
}
meld-solver-result-dialog .meld-solver-result .solve-result-mat-entry-holder .meld-solver-result-materia-entry .meld-solver-result-materia-entry-count {
  margin-left: 5%;
  text-align: left;
  grid-column: 3;
}
meld-solver-result-dialog .meld-solver-result-materia-entry-delta {
  text-align: center;
}
meld-solver-result-dialog .meld-solver-result-materia-entry-zero {
  color: var(--border-color-default);
}
meld-solver-result-dialog .meld-solver-result-materia-entry-diff {
  background-color: var(--scrollbar-bg);
}
meld-solver-area .modal-inner,
meld-solver-result-dialog .modal-inner {
  width: 500px;
  max-width: 95vw;
}
img.item-icon {
  border-radius: 10%;
}
img.item-icon.loaded {
  border-radius: unset;
  background: unset;
}
img.item-rarity-normal,
img.item-rarity-unknown {
  background: radial-gradient(#7a7b70, #4b4d4a);
}
img.item-rarity-green {
  background: linear-gradient(#494842, #29d281);
}
img.item-rarity-blue {
  background: radial-gradient(circle at 35% 35%, #63a0c9, #203c8b 50%);
}
img.item-rarity-relic {
  background: radial-gradient(#7550a7, #693971);
}
.abilities-used-table .ability-cell {
  height: 100%;
  max-height: var(--abilities-row-height);
  display: flex;
  align-items: center;
}
.abilities-used-table .ability-cell .ffxiv-ability-icon {
  height: 100%;
  display: block;
  aspect-ratio: 1;
}
.abilities-used-table .ability-cell .ability-name {
  overflow-x: hidden;
  text-overflow: ellipsis;
  line-height: initial;
  flex-shrink: 1;
  flex-grow: 1;
}
.abilities-used-table .ability-cell.ability-ogcd::before {
  content: '⤷';
  transform: scale(1.5);
  font-weight: bold;
  margin-right: 2px;
}
.abilities-used-table .ability-cell.ability-autoattack::before {
  content: '🗘';
  transform: scale(1.2) rotate(50deg);
}
.abilities-used-table .ability-cell.ability-item span {
  width: 100px;
}
.abilities-used-table th {
  text-align: center;
}
.abilities-used-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1px;
  height: var(--abilities-row-height);
}
.abilities-used-table td[col-id='time'] {
  text-align: right;
}
.abilities-used-table td[col-id='buffs'] {
  padding-top: 0;
}
.abilities-used-table td[col-id='buffs'] .active-buffs-list {
  height: 100%;
  width: 100%;
  display: inline-flex;
  align-items: center;
  max-height: var(--abilities-row-height);
}
.abilities-used-table td[col-id='buffs'] .active-buffs-list img {
  height: 100%;
  flex-shrink: 0;
  padding-right: 2px;
  aspect-ratio: 0.75;
}
.abilities-used-table td[col-id='buffs'] .active-buffs-list span {
  flex-shrink: 1;
  display: block;
  min-width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  line-height: var(--abilities-row-height);
}
.abilities-used-table td[col-id='time'],
.abilities-used-table th[col-id='time'] {
  min-width: 65px;
  width: 75px;
  max-width: 75px;
}
.abilities-used-table td[col-id='ability'],
.abilities-used-table th[col-id='ability'] {
  min-width: 150px;
  max-width: 400px;
}
.abilities-used-table td[col-id='unbuffed-pot'],
.abilities-used-table th[col-id='unbuffed-pot'] {
  width: 40px;
  max-width: 40px;
  text-align: right;
}
.abilities-used-table td .split-aligned-value,
.abilities-used-table th .split-aligned-value {
  display: flex;
  padding-right: 10px;
}
.abilities-used-table td .split-aligned-value :first-child,
.abilities-used-table th .split-aligned-value :first-child {
  flex-grow: 1;
}
.abilities-used-table td .split-aligned-value :last-child,
.abilities-used-table th .split-aligned-value :last-child {
  display: inline-block;
  width: 0;
  flex-basis: 0;
}
.abilities-used-table td .extra-indicator,
.abilities-used-table th .extra-indicator {
  width: 0;
  display: inline-block;
}
.abilities-used-table td[col-id='expected-damage'],
.abilities-used-table th[col-id='expected-damage'] {
  width: 100px;
  max-width: 100px;
  text-align: right;
  padding-right: 10px;
}
.abilities-used-table td[col-id='buffs'],
.abilities-used-table th[col-id='buffs'] {
  width: 400px;
  max-width: 400px;
}
sheet-info-modal .modal-content-area table {
  max-width: 600px;
  width: 100%;
}
sheet-info-modal .modal-content-area table td {
  width: 50%;
}
sheet-info-modal .modal-content-area table td[col-id='key'] {
  text-align: right;
  padding-right: 10px;
}
account-modal.modal-dialog .modal-inner .modal-content-area,
change-password-modal.modal-dialog .modal-inner .modal-content-area,
finalize-password-reset-modal.modal-dialog .modal-inner .modal-content-area {
  overflow: visible;
  max-width: 350px;
  min-width: 220px;
  width: calc(100vw - 50px);
}
account-modal.modal-dialog .modal-inner .modal-content-area button,
change-password-modal.modal-dialog .modal-inner .modal-content-area button,
finalize-password-reset-modal.modal-dialog .modal-inner .modal-content-area button {
  margin: 3px;
}
account-modal.modal-dialog .modal-inner .modal-content-area form input:not([type="checkbox"]),
change-password-modal.modal-dialog .modal-inner .modal-content-area form input:not([type="checkbox"]),
finalize-password-reset-modal.modal-dialog .modal-inner .modal-content-area form input:not([type="checkbox"]) {
  display: block;
  margin-bottom: 5px;
  width: 100%;
  box-sizing: border-box;
}
account-modal.modal-dialog .modal-inner .modal-content-area form input:not([type="checkbox"])::placeholder,
change-password-modal.modal-dialog .modal-inner .modal-content-area form input:not([type="checkbox"])::placeholder,
finalize-password-reset-modal.modal-dialog .modal-inner .modal-content-area form input:not([type="checkbox"])::placeholder {
  color: var(--fg-color);
  opacity: 0.8;
}
account-modal.modal-dialog .modal-inner .modal-content-area h3.divider,
change-password-modal.modal-dialog .modal-inner .modal-content-area h3.divider,
finalize-password-reset-modal.modal-dialog .modal-inner .modal-content-area h3.divider {
  width: 100%;
  text-align: center;
  position: relative;
}
account-modal.modal-dialog .modal-inner .modal-content-area .failed,
change-password-modal.modal-dialog .modal-inner .modal-content-area .failed,
finalize-password-reset-modal.modal-dialog .modal-inner .modal-content-area .failed {
  color: var(--issue-error-color);
}
account-modal.modal-dialog .modal-inner .modal-content-area input.failed,
change-password-modal.modal-dialog .modal-inner .modal-content-area input.failed,
finalize-password-reset-modal.modal-dialog .modal-inner .modal-content-area input.failed {
  color: var(--fg-color);
  box-shadow: 1px 1px 2px red inset, -1px -1px 2px #ff6000 inset;
}
account-modal.modal-dialog .modal-inner .modal-content-area .labeled-checkbox,
change-password-modal.modal-dialog .modal-inner .modal-content-area .labeled-checkbox,
finalize-password-reset-modal.modal-dialog .modal-inner .modal-content-area .labeled-checkbox {
  display: block;
}
account-modal.modal-dialog .modal-inner .modal-content-area .labeled-checkbox input,
change-password-modal.modal-dialog .modal-inner .modal-content-area .labeled-checkbox input,
finalize-password-reset-modal.modal-dialog .modal-inner .modal-content-area .labeled-checkbox input {
  width: unset;
  display: inline;
}
account-modal.modal-dialog loading-blocker .loading-spinner,
change-password-modal.modal-dialog loading-blocker .loading-spinner,
finalize-password-reset-modal.modal-dialog loading-blocker .loading-spinner {
  position: relative;
  top: calc(50% - 50px);
}
div.sync-tools {
  cursor: initial;
  font-weight: normal;
}
div.sync-tools > * {
  margin-right: 5px;
}
conflict-resolution-dialog .modal-content-area {
  max-width: 600px;
}
conflict-resolution-dialog .modal-content-area .conflict-resolution-mid {
  display: flex;
}
conflict-resolution-dialog .modal-content-area .conflict-resolution-mid > * {
  flex-basis: 50%;
}
/*# sourceMappingURL=style.css.map */