planner {display:block;--planner-column-gap:3em;--planner-header-height:1.6em;--planner-portrait-width:160px;--rank-color:#ffb72f;} planner .plannerAddRow {display:flex;gap:.5em;align-items:center;flex-wrap:wrap;margin:.5em 0 4em;}   planner .plannerSummary {display:grid;align-items:start;column-gap:0;grid-template-columns:var(--planner-portrait-width) minmax(0,var(--planner-column-gap)) 1fr minmax(0,var(--planner-column-gap)) auto;}   planner cardList {grid-column:1 / 4;display:grid;grid-template-columns:subgrid;row-gap:50px;} planner entityCard {display:contents;} planner .totals {grid-column:5;width:max-content;display:flex;flex-direction:column;align-items:flex-start;} planner powerTotal {display:block;line-height:1.2;} planner powerTotal span, planner powerTotal em {display:block;} planner powerTotal span {font-size:120%;font-weight:normal;} planner powerTotal em {font-size:180%;font-weight:bold;}   planner costList {display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:.4em 1.2em;margin-top:2.5em;} planner costList cost {margin:0;grid-column:1 / -1;} planner costList cost.pairedCost {grid-column:1;} planner costList cost.chestCost {grid-column:2;} planner costList cost.newGroup {margin-top:1.2em;} planner costList plannerLink {display:block;grid-column:1 / -1;} planner entityHeader, planner entityFooter {align-self:stretch;display:flex;align-items:center;gap:.4em;}   planner entityHeader {height:var(--planner-header-height);} planner entityFooter {justify-content:flex-end;gap:0;margin-top:3px;} planner entityName {flex:1;min-width:0;font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} planner entityLeft {grid-column:1;align-self:start;width:100%;display:flex;flex-direction:column;align-items:flex-end;gap:0.1rem;} planner entityCard img.avatar {width:100%;height:auto;} planner .groupCard img.avatar {width:100%;height:auto;align-self:start;} planner cells {grid-column:3;align-self:start;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:1px;margin-top:var(--planner-header-height);}     planner cell {position:relative;display:grid;grid-template-columns:80px 20px 80px;justify-content:start;align-items:center;align-content:start;gap:.3em .4em;}   planner cells > cell {padding:1.5em 2em;height:100%;box-sizing:border-box;background-color:rgba(128,128,128,0.05);} planner cells > cell:nth-child(4n+2), planner cells > cell:nth-child(4n+3) {background-color:rgba(128,128,128,0.12);} planner cellFields {display:contents;}   planner cell.addCell {display:flex;justify-content:flex-end;}   planner cellFields > *:first-child {grid-column-start:1;} planner cellHeader {grid-column:1 / -1;display:flex;align-items:center;gap:.5em;cursor:help;} planner cellHeader cellIcon {width:40px;height:40px;} planner cellIcon {flex:none;width:28px;height:28px;} planner cellIcon img {display:block;width:100%;height:100%;object-fit:contain;} planner cellLabel {max-width:12em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} planner cellArrow {width:1.2em;text-align:center;} planner cellGap {width:1em;}     planner fragmentsNeeded {grid-column:2 / -1;width:0;font-size:90%;opacity:0.5;white-space:nowrap;position:relative;z-index:1;cursor:help;} planner select {padding-right:1.9em;}   planner option:disabled, planner option.placeholder {color:#888888;}   planner .rankSelect .selectButton, planner rankMenuItem, planner star {color:var(--rank-color);} .light planner {--rank-color:darkorange;} planner .rankSelect .selectButton:hover, planner .rankSelect .selectButton:hover star {color:var(--select-color-hover);} planner rankMenuItem:hover star {color:inherit;}   planner {--plain-select-color:var(--select-color);--plain-select-border:var(--select-border);--plain-select-background:var(--select-background);--plain-select-border-hover:var(--select-border-hover);--plain-select-background-hover:var(--select-background-hover);}   planner button.addButton {width:7em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath transform='rotate(-90 146.2 146.2)' fill='%23999999' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");}   planner cellSelect.addSelect:not(.modestInputs) button.addButton {color:var(--plain-select-color);border-color:var(--plain-select-border);background-color:var(--plain-select-background);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath transform='rotate(-90 146.2 146.2)' fill='%23000000' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");} planner cellSelect.addSelect:not(.modestInputs) button.addButton:hover {border-color:var(--plain-select-border-hover);background-color:var(--plain-select-background-hover);} planner .rankSelect .selectButton, planner .cellButton {width:100%;} planner cellFields cellSelect {display:block;} planner cellArrow {width:100%;} planner .entitySelect {width:16em;} planner .groupSelect {width:12em;} planner cellFields select, planner cellFields input {width:100%;box-sizing:border-box;} planner cellFields input {padding:0.3em;} planner removeEntity, planner removeEntry {cursor:pointer;flex:none;line-height:1;padding:0 .2em;margin-left:auto;color:var(--header-color2);} planner removeEntity {font-size:1.3em;} planner removeEntity:hover, planner removeEntry:hover {color:var(--foreground);} planner cellSelect {display:inline-block;position:relative;}   planner .selectButton {box-sizing:border-box;text-align:left;padding:0.3em 1.9em 0.3em 0.3em;appearance:none;box-shadow:none;border:1px solid var(--select-border);background-color:var(--select-background);color:var(--select-color);background-repeat:no-repeat, repeat;background-position:right .7em top 50%, 0 0;background-size:.65em auto, 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%23999999' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");} planner .selectButton:hover {border-color:var(--select-border-hover);background-color:var(--select-background-hover);color:var(--select-color-hover);}   planner cellSelect:not(:has(cellMenu.open)) .selectButton:focus:not(:hover) {border-color:var(--select-border);background-color:var(--select-background);color:var(--select-color);} planner cellSelect.rankSelect:not(:has(cellMenu.open)) .selectButton:focus:not(:hover), planner cellSelect.rankSelect:not(:has(cellMenu.open)) .selectButton:focus:not(:hover) star {color:var(--rank-color);} planner cellSelect.addSelect:not(.modestInputs):not(:has(cellMenu.open)) button.addButton:focus:not(:hover) {border-color:var(--plain-select-border);background-color:var(--plain-select-background);color:var(--plain-select-color);}   planner cellSelect:has(cellMenu.open) .selectButton, planner cellSelect:has(cellMenu.open) .selectButton star {color:var(--select-color-hover);} planner cellSelect:has(cellMenu.open) .selectButton {border-color:var(--select-border-hover);background-color:var(--select-background-hover);} planner cellSelect.addSelect:not(.modestInputs):has(cellMenu.open) .addButton {border-color:var(--plain-select-border-hover);background-color:var(--plain-select-background-hover);}     planner cellMenu {display:none;position:fixed;z-index:60;width:max-content;max-height:22em;overflow-y:auto;overscroll-behavior:contain;padding:0;font-size:90%;background-color:var(--popup-background);color:var(--popup-foreground);box-shadow:var(--popup-shadow);border:var(--popup-border);} planner cellMenu.open {display:block;} planner cellMenuItem, planner rankMenuItem {display:flex;align-items:center;gap:.5em;padding:3px 15px;cursor:pointer;} planner rankMenuItem:hover {background-color:var(--popup-background-hovered);color:var(--popup-foreground-hovered);} planner cellMenuItem img {display:block;width:28px;height:28px;} planner cellMenuItem:hover {background-color:var(--popup-background-hovered);color:var(--popup-foreground-hovered);} planner cellMenuItem.used {opacity:0.4;cursor:default;} planner cellMenuItem.used:hover {background-color:transparent;color:var(--popup-foreground);} planner cellMenuSeparator {display:block;margin:4px 10px;border-top:1px solid var(--popup-foreground);opacity:0.3;}   planner cellMenu.popup.open {display:flex;align-items:stretch;gap:1px;padding:0;max-height:none;max-width:calc(100vw - 8px);overflow-x:auto;overscroll-behavior:auto;}   planner cellSelect.rangeSelect {grid-column:1 / -1;} planner cellSelect.rangeSelect .cellButton {text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} planner menuLevels {display:flex;flex-direction:column;justify-content:center;align-self:stretch;padding:.3em 0;background:rgba(128,128,128,0.15);} planner menuLevel {padding:2px 10px;white-space:nowrap;cursor:pointer;}   planner menuLevels:not(.ascensionRanks) menuLevel.equipped {color:#ffb72f;} planner menuLevels:not(.ascensionRanks) menuLevel.planned {color:#4fe08f;} planner menuLevels:not(.ascensionRanks) menuLevel.empty:not(.current) {opacity:0.5;color:white;} planner menuLevels:not(.ascensionRanks) menuLevel.current {color:var(--popup-foreground-hovered);} planner menuLevel.current {background-color:var(--popup-background-hovered);color:var(--popup-foreground-hovered);} planner menuLevel:hover {background-color:var(--popup-background-hovered);color:var(--popup-foreground-hovered);} @media (min-width:601px) {.light planner {margin-left:-35px;margin-right:-30px;} } @media (max-width:600px) {planner .plannerSummary {grid-template-columns:minmax(0,1fr);} planner cardList {grid-column:1;grid-template-columns:minmax(0,1fr);} planner entityLeft, planner cells, planner .totals {grid-column:1;}   planner entityLeft {width:var(--planner-portrait-width);align-items:flex-start;} planner cells {grid-template-columns:1fr;margin-top:0;} planner .totals {justify-self:start;} planner powerTotal {align-self:flex-start;margin-top:3em;} }