Synergism.css

html {
    min-width: 1250px;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    scrollbar-width: none;
}

body {
    background-color: #111;
    transform-origin: 0 0;
    overflow-x: hidden;
    color: white;
    margin: 0;
    box-sizing: border-box;

    /* overflow-y: hidden; */
}

a {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: white;
}

label {
    display: block;
}

input,
button,
select,
textarea {
    font-size: 12px;
    padding: 0.05em;
    margin: 0 0 0 0;
    box-sizing: border-box;
    border: 0 solid #ccc;
}

input:disabled {
    color: gray;
}

input[type="range"] {
    height: 0;
}

button {
    color: white;
    background-color: #171717;
    outline: none;
    cursor: pointer;
}

button:active {
    background-color: #171717;
    cursor: pointer;
}

button:focus {
    border-color: #171717;
    cursor: pointer;
}

.flex {
    display: flex;
}

.flex.row {
    flex-flow: row;
}

.flex.column {
    flex-flow: column;
}

.flex.center {
    justify-content: center;
}

.vAlign {
    display: flex;
    justify-content: center;
    flex-flow: column;
}

.hCenter {
    margin-left: auto;
    margin-right: auto;
}

.hCenter.tight {
    margin-top: 0;
    margin-bottom: 0;
}

#notification {
    display: none;
    position: fixed;
    transform: translate(7.5%, 22.5%);
    z-index: 6969;
    width: 15%;
    height: 12.5%;
    border-radius: 5px;
    border: 1px solid gold;
    background-color: darkcyan;
}

#notification > p {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

#notifx {
    position: fixed;
    top: 1px;
    right: 1px;
}

#confirmationBox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6969;
    width: 30%;
    height: 30%;
    background-color: rgb(20, 20, 20);
    border-radius: 5px;
    border: 1px solid gold;
}

#confirmWrapper,
#alertWrapper,
#promptWrapper {
    height: 100%;
    display: none;
}

#confirm > p,
#alert > p,
#prompt > label {
    grid-area: txt;
    text-align: center;
    margin-left: 15px;
    margin-right: 15px;
}

/* Elements relating to the browser popup functions (Alert, Confirm, etc) */

#ok_confirm,
#ok_alert,
#ok_prompt { grid-area: btn; }

#cancel_confirm,
#cancel_prompt { grid-area: btn2; }
#prompt_text { grid-area: lbl; }

#confirm > button,
#alert > button,
#prompt > button {
    width: 75%;
    border: 1px solid gold;
    margin: 0 auto;
    height: 50%;
    transition-duration: 0.15s;
}

#confirm > button:hover,
#alert > button:hover,
#prompt > button:hover {
    background-color: #333;
}

#confirm {
    height: 100%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 75% 25%;
    grid-template-areas:
        "txt txt txt txt"
        ". btn btn2 .";
}

#alert {
    height: 100%;
    display: grid;
    grid-template-columns: 33.33333% 33.33333% 33.33333%;
    grid-template-rows: 75% 25%;
    grid-template-areas:
        "txt txt txt"
        ". btn .";
}

#prompt {
    height: 100%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 5% 55% 10% 5% 25%;
    grid-template-areas:
        ". . . ."
        "txt txt txt txt"
        ". lbl lbl ."
        ". . . ."
        ". btn btn2 .";
}

#resourcesrow {
    position: relative;
    font-size: 16px;
    width: 100%;
}

#preload {
    position: absolute;
    z-index: 2;
}

#offlineContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

.offlineStats {
    display: flex;
    flex-direction: column;
    z-index: 3;
    margin-bottom: 2px;
}

.offlineStat {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 32px;
    z-index: 3;
    margin-bottom: 2px;
}

.offlineStatElement {
    height: 23px;
    margin-left: 10px;
}

.offlineText {
    display: flex;
    z-index: 5;
}

#offlineTimer {
    display: flex;
    z-index: 5;
}

#progressbardescription {
    display: flex;
    z-index: 5;
}

#exitOffline {
    height: 30px;
    z-index: 3;
    width: auto;
    margin-top: 20px;
    border: 2px solid ivory;
    background-color: purple;
    color: white;
}

.resetInformationContainer {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.resetsContainer {
    display: flex;
}

.resetbtn {
    cursor: pointer;
    margin-right: 5px;
}

#resetrow {
    display: flex;
    margin-left: -2px;
}

#resetrow img {
    height: 32px;
    width: 32px;
    margin-left: 3px;
}

#resetinfo {
    text-align: center;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    width: 600px;
}

#resetrewards > div {
    display: flex;
    line-height: 32px;
}

#resetrewards > div > div {
    margin-left: 3px;
}

#tabrow {
    text-align: center;
    width: 100%;
    list-style: none;
    margin: 0;
    margin-inline: unset;
    margin-block: unset;
    padding-inline: unset;
    display: flex;
    justify-content: center;
}

.navbar {
    display: flex;
    justify-content: center;
    width: 100%;
}

nav li {
    display: inline-block;
    border: 1px solid;
    width: 100px;
    min-width: 100px;
    color: white;
    background-color: #171717;
    cursor: pointer;
    line-height: 21px;
    height: 21px;
    margin-right: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: none;
    transition-duration: 0.15s;
    text-align: center;
}

nav li:hover {
    background-color: #333;
}

#buildingstab {
    border-color: orange;
}

#upgradestab {
    border-color: orange;
}

#settingstab {
    color: white;
    border-color: white;
}

#achievementstab {
    border-color: white;
}

#runestab {
    border-color: cyan;
}

#challengetab {
    border-color: plum;
}

#researchtab {
    border-color: green;
}

#shoptab {
    border-color: white;
    background-color: purple;
}

#shoptab:hover {
    background-color: #b300b2;
}

#anttab {
    border-color: maroon;
}

#cubetab {
    border-color: orange;
    color: red;
}

#traitstab {
    border-color: orange;
    color: red;
}

.subTabWrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 10px;
}

.subTabWrapper > button {
    height: 30px;
    width: 150px;
    text-align: center;
    margin-right: 17px;
    transition-duration: 0.15s;
}

.subTabWrapper > button:hover {
    background-color: #333;
}

#buyamountcoin {
    position: absolute;
    top: 0;
    left: 80%;
}

#togglecoinbuy {
    color: white;
    position: absolute;
    font-size: 11px;
    width: 220px;
    left: 80%;
    top: 30px;
    margin-left: -87px;
}

#buildingtext {
    position: relative;
    padding: 0;
}

#buildingsTable {
    position: relative;
    top: 27%;
    left: 25%;
}

#buildings2 {
    position: relative;
    top: 71%;
    left: 12.5%;
}

#upgrades {
    position: relative;
    text-align: center;
    padding: 0;
    color: gold;
}

#upgradesFlex {
    display: flex;
    flex-direction: row;
    width: 90%;
    margin-left: 3.5%;
    margin-top: 4%;
}

#upgradesFlex > div {
    display: flex;
    flex-direction: column;
    width: calc(100% / 6);
    align-items: center;
}

#upgradesFlex > div > img {
    width: 32px;
    height: 32px;
}

#upgradesFlex > div > p {
    margin-top: 5px;
    margin-bottom: 5%;
}

#upgradesFlex > div > table {
    height: 182px;
}

#upgradesFlex > div > button {
    width: 80px;
    height: 30px;
}

#shoptogglecoin { grid-column-start: 1; }
#shoptoggleprestige { grid-column-start: 2; }
#shoptoggletranscend { grid-column-start: 3; }
#shoptogglegenerator { grid-column-start: 4; }
#particleAutoUpgrade { grid-column-start: 6; }

#upgradesrow3 {
    text-align: center;
    margin-top: 7px;
}

#upgradesrow3 > p {
    padding-top: 0;
    margin: 0;
}

#upgradeeffect { color: pink; }

#toggle9 {
    width: 130px;
    height: 30px;
    margin: 25px auto;
}

#settings {
    position: relative;
    padding: 0;
    text-align: center;
}

/* Settings settings sub tab */

#settingsubtab {
    flex-direction: column;
    margin-left: 12%;
    margin-right: 12%;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.settingSubTabUpper {
    display: flex;
}

.confirmationToggles {
    display: flex;
    flex-direction: row;
    margin: auto;
}

/* Utility functions including import/export, save file name, manual save, and manual reset */
#exportButtons {
    display: flex;
    flex-direction: column;
    margin: 0.8em 0;
}

#exportButtons > * { margin: 0.15em 0; }

#importFileButton {
    border: 2px solid white;
    width: 176px;
    margin: 2px auto;
    padding: 0 0 2px;
    cursor: pointer;
    transition-duration: 0.15s;
}

#importFileButton:hover {
    background-color: #333;
}

#savegame,
#deleteGame {
    width: 180px;
    margin: 2px auto;
    transition-duration: 0.15s;
}

#savegame:hover,
#deleteGame:hover {
    background-color: #333;
}

#exportgame {
    width: 150px;
    height: 40px;
    margin: 5px auto;
    transition-duration: 0.15s;
}

#exportgame:hover {
    background-color: #333;
}

/* Third party URLs (Discord, Patreon, patch notes) */
#thirdParty > div {
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    color: gold;
    margin: 0.8em 0;
}

#thirdParty > div > a {
    /* For whatever reason this fixes the click area for the external links */
    margin: 0 auto;
}

/* Confirmation toggle box */
.confirmationToggle {
    display: flex;
    flex-direction: column;
    width: 40px;
    margin-left: 5px;
    margin-right: 5px;
}

#promocodes {
    transition-duration: 0.15s;
    padding: 5px;
}

#promocodes:hover {
    background-color: #333;
}

#promocodeinfo {
    word-break: break-all;
    width: 75%;
    margin: 0 auto;
}

.center {
    margin: auto;
}

.settingpic {
    flex-grow: unset;
    margin: 4px;
}

.auto.square {
    width: 40px;
    height: 40px;
    transition-duration: 0.15s;
}

.auto.square:hover {
    background-color: #333;
}

.buttonRow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 30px;
    margin-left: 8.5%;
}

.buttonRow > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 35px;
}

.buttonRow > div > p {
    margin-top: 0.25em;
}

.buttonRow > div > .image {
    height: 32px;
    width: 32px;
}

.buttonRow > div > .desc {
    width: 350px;
    min-width: 350px;
    margin-left: 10px;
}

.buildingPurchaseBtn {
    width: 150px;
    min-width: 150px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid white !important;
    background-color: #171717;
    transition-duration: 0.15s;
    cursor: default;
}

.buildingPurchaseBtnAvailable {
    cursor: pointer;
    background-color: #555;
}

.buildingPurchaseBtnAvailable:hover {
    background-color: #666;
}

.buttonRow > div > .auto {
    width: 80px;
    height: 30px;
    margin-left: 15px;
}

.autobuyerToggleButton {
    background-color: #171717;
    transition: background-color 0.15s;
}

.autobuyerToggleButton:hover {
    background-color: #333;
}

.buttonRow > div > .stats {
    width: 400px;
    margin-left: 10px;
}

#taxinfo {
    text-align: center;
    font-size: 1em;
    margin-top: 30px;
}

#buildinghotkeys {
    padding: 5px;
    height: 20px;
    color: lightgray;
    text-align: center;
    width: 1200px;
    margin: 0 auto;
}

.tightText {
    margin: 0 auto;
    text-align: center;
}

#statistics {
    position: relative;
    text-align: center;
    padding: 0;
    color: whitesmoke;
}

#achievementstable {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#achievementinfo {
    display: flex;
    flex-direction: column;
    border-top: 2px solid plum;
    text-align: center;
    width: 50%;
    margin: 0 auto;
    overflow-wrap: break-word;
}

/* Removes giant space between paragraphs */
#achievementinfo > p { margin: 0; }

#achievementtutorial { color: white; }
#achievementdescription { color: gold; }
#achievementreward { color: limegreen; }

/* Decrease space between paragraphs */
#achievementColorInfo { line-height: 0.5; }

#achievementcolorcode1 { color: limegreen; }
#achievementcolorcode2 { color: purple; }
#achievementcolorcode3 { color: crimson; }
#achievementcolorcode4 { color: gray; }

#buyamountcrystal {
    position: absolute;
    top: 0;
    left: 80%;
}

#buyamountoffering {
    position: absolute;
    font-size: 11px;
    width: 220px;
    left: 80%;
    top: 30px;
    margin-left: -173px;
}

.talismanBuyAmountContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 30%;
}

#buyamounttalisman {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#buyamountmythos {
    position: absolute;
    top: 0;
    left: 80%;
}

#buyamountparticle {
    position: absolute;
    top: 0;
    left: 80%;
}

#buyAmountTesseract {
    position: absolute;
    top: 0;
    left: 80%;
}

.buyAmountBtn {
    background-color: black;
    cursor: pointer;
    transition-duration: 0.15s;
}

.buyAmountBtn:hover {
    background-color: #333;
}

#togglecrystalbuy {
    color: white;
    position: absolute;
    font-size: 11px;
    width: 220px;
    left: 80%;
    top: 30px;
    margin-left: -87px;
}

#toggleofferingbuy {
    color: white;
    position: absolute;
    font-size: 11px;
    width: 220px;
    left: 80%;
    top: 30px;
    margin-left: -120px;
}

#toggletalismanbuy {
    font-size: 11px;
    margin: -4px 0 5px;
}

#togglemythosbuy {
    color: white;
    position: absolute;
    font-size: 11px;
    width: 220px;
    left: 80%;
    top: 30px;
    margin-left: -87px;
}

#toggleparticlebuy {
    color: white;
    position: absolute;
    font-size: 11px;
    width: 220px;
    left: 80%;
    top: 30px;
    margin-left: -87px;
}

#toggleTesseractBuy {
    color: white;
    position: absolute;
    font-size: 11px;
    width: 220px;
    left: 80%;
    top: 30px;
    margin-left: -87px;
}

#coinBuildings {
    display: flex;
    position: relative;
    padding: 0;
    flex-direction: column;
    align-items: center;
}

#prestige {
    position: relative;
    padding: 0;
    color: cyan;
    flex-direction: column;
    align-items: center;
}

#crystalupgradestable { margin: 0 auto; }

#prestigeshardinfo,
#crystalupgrades > p { margin: 2px; }

#prestigeamount {
    border: 1px solid cyan;
    color: white;
    background-color: black;
}

#autocrystalbuild {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 35px;
}

#toggle15,
#prestigeautotoggle,
#prestigeamount { width: 150px; }

#toggle15,
#prestigeautotoggle {
    transition-duration: 0.15s;
}

#toggle15:hover,
#prestigeautotoggle:hover {
    background-color: #333;
}

#prestigehotkeys {
    width: 1200px;
    color: gray;
}

#autocrystalbuild > p { margin: 0; }
#autoprestige { color: white; }

#runes {
    position: relative;
    padding: 0;
}

#runeContainer1,
#runeContainer3,
#runeContainer4 {
    flex-direction: column;
    align-items: center;
}

#runeContainer2 {
    margin-top: 20px;
}

#runesToggle {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 10px;
}

#runesToggle > button {
    height: 30px;
    width: 100px;
    margin: 0 7px;
    text-align: center;
    transition-duration: 0.15s;
}

#runesToggle > button:hover {
    background-color: #333;
}

#offeringDetails {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-bottom: auto;
}

#offeringDetails > p {
    height: auto;
    margin: auto;
}

#runeDetails {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    height: auto;
    margin: 10px;
}

.runeType {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 20px;
    margin-right: 20px;
}

.runeType > button {
    height: 30px;
    width: 100px;
    text-align: center;
    border: 2px solid gold;
    cursor: default;
}

.runeTypeElement {
    margin: auto;
    text-align: center;
    align-items: center;
    align-content: center;
}

.runeType > .runeButtonAvailable {
    background-color: purple;
    cursor: pointer;
    transition-duration: 0.15s;
}

.runeType > .runeButtonAvailable:hover {
    background-color: #b300b2;
}

#runeEffectDisplays {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-bottom: auto;
}

#runeEffectDisplays > p {
    height: auto;
    margin: auto;
}

#toggleautofortify,
#toggleautoenhance {
    width: 125px;
    height: 30px;
    color: white;
    border: 2px solid red;
    transition-duration: 0.15s;
}

#toggleautofortify:hover,
#toggleautoenhance:hover {
    background-color: #333;
}

#talismanFragmentCost {
    width: 250px;
    text-align: center;
    font-size: 1.1em;
    margin-right: -30px;
}

.talismanShardsContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 30%;
    margin-top: 25px;
}

.talismanShardContainer {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.talismanShardIcon {
    width: 32px;
}

.talismanShardAmount {
    min-width: 70px;
    margin-left: 4px;
    font-size: 0.9em;
}

.talismanBtn {
    height: 30px;
    width: 80px;
    min-width: 80px;
    color: orange;
    cursor: pointer;
    transition-duration: 0.15s;
}

.talismanBtn:hover {
    background-color: #333;
}

.talisminBtnAvailable {
    background-color: purple;
    cursor: pointer;
}

.talisminBtnAvailable:hover {
    background-color: #b300b2;
}

.talismansContainer {
    display: flex;
    position: relative;
    width: 70%;
    justify-content: space-around;
    padding: 0 10px;
}

.talismanContainer {
    flex-direction: column;
    width: 11%;
    min-width: 102px;
    align-items: center;
    white-space: nowrap;
}

.talismanName {
    font-size: 1.2em;
    text-align: center;
}

.talismanIcon {
    width: 72px;
    border: 4px solid white;
    cursor: pointer;
}

.talismanLevel {
    margin-top: 1px;
    margin-bottom: 3px;
}

#respecAllTalismans {
    position: absolute;
    height: 30px;
    width: 80px;
    color: plum;
    border: 2px solid white;
    left: 70px;
    top: 290px;
}

#talismanEffect {
    position: absolute;
    left: 50%;
    width: 600px;
    margin-left: -300px;
    top: 290px;
    text-align: center;
}

#talismanBonus {
    position: absolute;
    top: 20px;
    left: 145px;
}

#talismanRune1Effect {
    position: absolute;
    top: 40px;
    left: 145px;
}

#talismanRune2Effect {
    position: absolute;
    top: 60px;
    left: 145px;
}

#talismanRune3Effect {
    position: absolute;
    top: 80px;
    left: 145px;
}

#talismanRune4Effect {
    position: absolute;
    top: 100px;
    left: 145px;
}

#talismanRune5Effect {
    position: absolute;
    top: 120px;
    left: 145px;
}

#talismanMythicEffect {
    position: absolute;
    top: 140px;
    left: 145px;
}

#talismanlevelup {
    position: absolute;
    left: 50%;
    width: 600px;
    margin-left: -200px;
    top: 330px;
    text-align: center;
}

#talismanLevelUpSummary {
    position: absolute;
    top: -40px;
    left: 50px;
}

#talismanrespec {
    position: absolute;
    left: 50%;
    width: 600px;
    margin-left: -300px;
    top: 290px;
    text-align: center;
}

.talismanRespecBtn {
    height: 30px;
    width: 200px;
    text-align: center;
    transition-duration: 0.15s;
}

.talismanRespecBtn:hover {
    background-color: #333;
}

#talismanRespecButton1 {
    position: absolute;
    top: 50px;
    left: 200px;
}

#talismanRespecButton2 {
    position: absolute;
    top: 81px;
    left: 200px;
}

#talismanRespecButton3 {
    position: absolute;
    top: 112px;
    left: 200px;
}

#talismanRespecButton4 {
    position: absolute;
    top: 143px;
    left: 200px;
}

#talismanRespecButton5 {
    position: absolute;
    top: 174px;
    left: 200px;
}

#confirmTalismanRespec {
    position: absolute;
    top: 112px;
    left: 430px;
}

#cancelTalismanRespec {
    position: absolute;
    top: 143px;
    left: 430px;
}

#transcension {
    position: relative;
    padding: 0;
    flex-direction: column;
    align-items: center;
}

#transcension > .buttonRow {
    color: pink;
}

#transcendshardinfo { margin: 2px; }

#transcendshardbonus {
    margin-bottom: 100px;
    margin-top: 2px;
}

#transcendamount {
    border: 1px solid plum;
    color: white;
    background-color: black;
}

#autotranscend {
    text-align: center;
    color: white;
}

#toggle21 { margin-top: 100px; }

#toggle21,
#transcendautotoggle,
#transcendamount {
    width: 150px;
    margin: 0 auto;
}

#toggle21,
#transcendautotoggle {
    transition-duration: 0.15s;
}

#toggle21:hover,
#transcendautotoggle:hover {
    background-color: #333;
}

#transcendhotkeys {
    color: gray;
    text-align: center;
}

#challenges {
    position: relative;
    padding: 0;
}

#challengesWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#challengeIntroduction {
    text-align: center;
    color: white;
    font-size: 1.2em;
    line-height: 0.4;
    margin-top: 30px;
}

#challengesAutoToggles {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#challengesAutoToggles > button {
    height: 30px;
    width: 200px;
    margin: 7px;
    transition-duration: 0.15s;
}

#challengesAutoToggles > button:hover {
    background-color: #333;
}

#toggleAutoChallengeStart { border: 2px solid gold; }

#startChallenge {
    border: 2px solid red;
    font-size: 1.1em;
    width: 300px;
    height: 75px;
    background-color: black;
    color: white;
    transition-duration: 0.15s;
}
#retryChallenge { border: 2px solid plum; }

/* Hide the last 3 buttons until the user clicks on a challenge */
#toggleAutoChallengeIgnore,
#startChallenge,
#retryChallenge { display: none; }

#challengeIcons {
    font-size: 0;
    align-self: center;
    margin-top: 10px;
}

#challengeIcons .challengeLevels {
    font-size: 12px;
    text-align: center;
}

#challengeDetails {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#challengeTimers {
    margin-right: 20px;
}

#startChallenge:hover {
    background-color: #333;
}

#oneChallengeDetails {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 600px;
}

#oneChallengeDetails > p {
    margin: auto;
    height: auto;
}

#challengeName { color: white; }
#challengeFlavor { color: plum; }
#challengeRestrictions { color: crimson; }
#challengeGoal { color: gold; }
#challengePerCompletionRewards { color: white; }
*[id^="challengePer"] { color: pink; }
#challengeFirstCompletionRewards { color: white; }
#challengeFirst1 { color: orange; }
#challengeQuarkBonus { color: cyan; }

#challengeTimersText > p {
    margin: 0;
    font-size: 1.2em;
}

#challengeTimersText > input {
    height: 20px;
    font-size: 1.1em;
}

#challengeWorthlessTexts {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 10px;
}

#challengeWorthlessTexts > p {
    margin: 0;
    padding: 0;
    padding: 5px;
    height: 20px;
}

#challengehotkeys { color: gray; }
#challengewarning { color: crimson; }
#challengewarningreincarnation { color: limegreen; }

.challenge {
    background-color: #171717;
    transition-duration: 0.15s;
}

.challenge:hover {
    background-color: #333;
}

.challengeActive {
    background-color: plum;
}

.challengeActive:hover {
    background-color: #ebc7eb;
}

#reincarnation {
    position: relative;
    padding: 0;
    color: limegreen;
    flex-direction: column;
    align-items: center;
}

#reincarnationTexts {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    text-align: center;
}

#reincarnationTexts > p { margin: 0; }

#toggle27 { margin-top: 55px; }

#toggle27,
#reincarnationamount,
#reincarnateautotoggle { width: 150px; }

#toggle27,
#reincarnateautotoggle {
    transition-duration: 0.15s;
}

#toggle27:hover,
#reincarnateautotoggle:hover {
    background-color: #333;
}

#reincarnateautomation > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#autoreincarnate {
    color: white;
}

#reincarnationamount {
    border: 1px solid green;
    color: white;
    background-color: black;
}

#reincarnationinfo {
    color: lime;
}

#reincarnatehotkeys {
    color: gray;
    text-align: center;
    margin: 0;
}

#research {
    position: relative;
    padding: 0;
}

#researchtable {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 0;
}

#researchtable > tbody {
    margin-top: 15px;
}

#researchDetails {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-bottom: auto;
}

#researchDetails > p {
    width: 850px;
    margin: auto;
}

#researchToggles {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    margin-top: 20px;
    margin-bottom: auto;
}

#researchToggles > button {
    width: 175px;
    height: 30px;
    margin: 0 7px;
    text-align: center;
    transition-duration: 0.15s;
}

#researchToggles > button:hover {
    background-color: #333;
}

#researchinfo2 {
    height: 40px;
}

.researchAvailable {
    cursor: pointer;
    transition-duration: 0.15s;
}

.researchAvailable:hover {
    background-color: #333;
}

.researchPurchased {
    background-color: purple;
}

.researchPurchasedAvailable {
    cursor: pointer;
    transition-duration: 0.15s;
}

.researchPurchasedAvailable:hover {
    background-color: #b300b2;
}

.researchRoomba {
    background-color: orange;
}

.researchMaxed {
    background-color: green;
}

#shop {
    text-align: center;
}

#shopWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#actualWrapper {
    display: flex;
    width: 100%;
    justify-content: center;
}

#actualShopContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#actualShop {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-right: 5px;
    margin-top: 10px;
    width: calc(105px * 8);
    border: 3px solid plum;
}

#actualShop > div {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    width: 100px;
}

#actualPotionShop > div > p,
#actualShop > div > p {
    margin: 3px;
    white-space: nowrap;
}

#shoptop {
    color: whitesmoke;
    font-size: 1.2em;
    margin-top: 15px;
}

#actualConsumables {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(130px * 2);
    margin-right: 3%;
}

#actualPotionShop {
    display: grid;
    grid-template-columns: repeat(2, minmax(70px, 130px));
    border: 3px solid yellow;
    margin-top: 10px;
}

#quarksDisplay {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#quarkamount {
    font-size: 1.2em;
    color: aqua;
    margin-left: 5px;
}

#consumables {
    color: orangered;
    font-size: 1.2em;
    margin-top: 15px;
}

#shopButtons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    float: right;
    margin-top: 5px;
}

#shopButtons > button {
    width: 150px;
    height: 40px;
    margin-left: 5px;
    transition-duration: 0.15s;
}

#shopButtons > button:hover {
    background-color: #333;
}

#shopHovers {
    width: 600px;
}

#shopHovers > p { margin: 0; }

.consumablebutton {
    width: 128px;
    height: 40px;
    transition-duration: 0.15s;
}

.consumablebutton:hover {
    background-color: #333;
}

.permshopbutton {
    width: 100px;
    height: 40px;
    transition-duration: 0.15s;
}

.permshopbutton:hover {
    background-color: #333;
}

#ants {
    position: relative;
    padding: 0;
    text-align: center;
}

#antsWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
}

#antsWelcomeTexts { margin-top: 30px; }
#antsWelcomeTexts > p { margin: 2px; }
#antwelcome { font-size: 1.3em; }

#antrow1 { margin-top: 12px; }

#antrow2 {
    margin-top: 7px;
    height: 115px;
}

#antrow3 {
    margin-top: 30px;
    height: 115px;
}
#antrow4 { margin-top: 10px; }

#antrow2 > p { margin: 0; }
#crumbcount { font-size: 1.2em; }

#antrow3 > p { margin: 5px; }

#antToggleFeatures {
    display: flex;
    justify-content: center;
    margin: 5px 0;
}

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

.antSacrificeButtonsContainer {
    display: flex;
    justify-content: center;
}

#toggleAntMax {
    height: 35px;
    width: 100px;
    margin-right: 10px;
    border: 1px solid gold;
    transition-duration: 0.15s;
}

#toggleAntMax:hover {
    background-color: #333;
}

#toggleAutoSacrificeAnt {
    height: 35px;
    width: 150px;
    margin-right: 10px;
    border: 1px solid crimson;
    transition-duration: 0.15s;
}

#toggleAutoSacrificeAnt:hover {
    background-color: #333;
}

#autoSacrificeAntMode {
    height: 20px;
    width: 150px;
    border: 1px solid green;
    transition-duration: 0.15s;
}

#autoSacrificeAntMode:hover {
    background-color: #333;
}

#autoAntSacrificeAmount {
    width: 150px;
}

#autoAntSacrifice {
    text-align: center;
    width: 100%;
}

#antSacrificeTimer {
    position: absolute;
    padding: 0;
    width: 300px;
    margin-left: -118px;
    top: 30px;
    text-align: center;
    left: 70%;
}

#antSacrifice {
    position: absolute;
    padding: 0;
    top: 70px;
    text-align: center;
    left: 70%;
}

.antSacrificeSettingsContainer {
    display: flex;
    flex-direction: column;
}

#antSacrificeSummary {
    position: absolute;
    padding: 0;
    width: 300px;
    top: 30px;
    text-align: center;
    left: 77%;
}

#antELO {
    position: absolute;
}

#antUpgradeMultiplier {
    position: absolute;
    top: 20px;
}

#antTimeMultiplier {
    position: absolute;
    top: 40px;
}

#antSacrificeTitle {
    position: absolute;
    top: 60px;
}

#antSacrificeMultiplier {
    position: absolute;
    top: 80px;
}

#antSacrificeTable {
    position: absolute;
    top: 122px;
    left: 100px;
    padding: 0;
    border-spacing: 0;
}

.antBtn {
    background-color: #171717;
}

.antTierBtnAvailable {
    cursor: pointer;
    background-color: white;
}

.antUpgradeBtnAvailable {
    cursor: pointer;
    background-color: silver;
}

#cubes {
    position: relative;
    padding: 0;
}

/* Wow! Cube sidebar */
#wowCubeSidebar {
    display: flex;
    flex-direction: column;
    margin-right: 2%;
    text-align: center;
}

#wowCubeSidebarButtons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.cubeSwitchTabBtn {
    width: 250px;
    height: 30px;
    margin: 3px;
    transition-duration: 0.15s;
}

.cubeSwitchTabBtn:hover {
    background-color: #333;
}

#wowCubeSidebar > p { margin: 0; }
#cubeToQuarkTimer { font-size: 1.2em; }

.cubePlacement1 {
    font-size: 1.2em;
}

.cubePlacement2,
.cubePlacement3 {
    font-size: 1em;
}

.cubePlacement4 {
    position: absolute;
    text-align: center;
    top: 100px;
    left: 30%;
    margin-left: -32px;
}

.cubePlacement5 {
    position: absolute;
    text-align: center;
    top: 84px;
    left: 40%;
    margin-left: -96px;
}

.cubeBtn {
    width: 100px;
    height: 30px;
    color: white;
    background-color: black;
    border: 1px solid gold;
    transition-duration: 0.15s;
}

.cubeBtn:hover {
    background-color: #333;
}

p[id$="BlessingsTotal"] {
    padding: 15px;
}

#cubeBlessingsTotal { color: orange; }
#tesseractBlessingsTotal { color: orchid; }
#hypercubeBlessingsTotal { color: rgb(255, 0, 76); }
#platonicBlessingsTotal { color: orange; }

#cubesWrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-left: -185px;
}

.openGrid {
    display: flex;
    align-self: flex-start;
}

.openImage {
    height: 64px;
    width: 64px;
}

.inventory {
    white-space: nowrap;
    margin: 6px 10px;
}

.openBtn {
    grid-row: 2;
    grid-column: 2;
    margin-left: 10px;
}

.openButtons {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cubeBonus {
    margin-left: -2px;
    margin-top: 5px;
    width: 100%;
}

.cubeIcon {
    border-spacing: 0;
}

.cubeTab {
    flex-direction: column;
    align-items: center;
    width: 700px;
}

#cubeTab5Wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 700px;
    margin-top: 15px;
}

#cubeTab5Wrapper > p { margin: 2px; }

#cubeTab6 {
    flex-direction: row;
    align-items: flex-start;
}

#cube1Bonus {
    width: 1500px;
}

#tesseract1Bonus {
    width: 1500px;
}

#hypercube1Bonus {
    width: 1500px;
}

#cubeAmount2 { color: white; }

#cubeUpgradeTable {
    border-collapse: collapse;
    font-size: 0;
}

#toggleCubeBuy {
    width: 200px;
    height: 30px;
}

.gridImg {
    cursor: pointer;
}

#switchsettingtab {
    position: absolute;
    height: 30px;
    width: 200px;
    left: 50%;
    margin-left: -100px;
    top: 10px;
    border: 2px solid gold;
}

#switchsettingtab2 {
    position: absolute;
    height: 30px;
    width: 200px;
    left: 50%;
    margin-left: -100px;
    top: 40px;
    border: 2px solid orange;
}

/* Credits */

#creditssubtab {
    margin-top: 4.5%;
    margin-left: 14%;
    margin-right: 14%;
}

#creditssubtab > * {
    font-size: 1.2em;
    text-align: center;
    margin: 0.4em 0;
}

#versionnumber {
    color: fuchsia;
}

#ascension {
    position: relative;
    padding: 0;
    color: orange;
    flex-direction: column;
    align-items: center;
}

#tesseractTexts { margin-top: 20px; }

#tesseractTexts > p {
    margin: 0;
    text-align: center;
}

#ascendConstantUpgrades {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 450px;
}

#ascendConstantUpgrades > p {
    margin: 0;
    text-align: left;
    width: 100%;
}

#ascendautomation {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

#tesseractautobuytoggle,
#tesseractAmount {
    width: 150px;
}

#tesseractautobuytoggle {
    transition-duration: 0.15s;
}

#tesseractautobuytoggle:hover {
    background-color: #333;
}

#tesseractAmount {
    border: 1px solid green;
    color: white;
    background-color: black;
}

#autotessbuyeramount {
    color: white;
    margin: 0;
}

#ascendHotKeys {
    margin: 0;
    color: gray;
    text-align: center;
}

#creditssubtab > h1 {
    font-size: 1.5em;
    text-align: center;
}

#creditList {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
}

.credit {
    display: flex;
    flex-direction: row;
    margin-top: 2px;
}

.credit > a {
    margin-left: 5px;
}

#artistList {
    display: grid;
    grid-template-columns: repeat(4, 160px);
    justify-content: center;
}

#statisticsSubTab {
    padding-top: 25px;
    overflow-x: auto;
    grid-template-columns: repeat(2, minmax(50px, 25%));
    justify-content: center;

    /* don't inherit this property; defaults to center and messes it up */
    scrollbar-width: none;
}

#statisticsSubTab::-webkit-scrollbar {
    display: none;
}

#statsForNerds {
    display: grid;
    grid-template-columns: repeat(3, minmax(50px, 33.33%));
    grid-template-rows: repeat(9, 12.5%);
    height: 300px;
}

#statsForNerds > button {
    width: 150px;
    height: 30px;
    margin: 3px;
    transition-duration: 0.15s;
}

#statsForNerds > button:hover {
    background-color: #333;
}

.statContainer {
    width: 400px;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: auto;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    display: none;
}

#miscStats {
    display: block;
}

.statPortion {
    width: 380px;
    height: auto;
    margin: auto;
    color: white;
    text-align: left;
    font-size: 1em;
}

.statPortion.indented {
    width: 360px;
    padding-left: 20px;
}

.statNumber {
    color: yellow;
    font-size: 0.9em;
    float: right;
}

.statPortion.statTotal {
    color: orange;
    font-weight: bold;
    font-size: 1em;
}

.statNumber.statTotal {
    color: deepskyblue;
}

.constUpgrade {
    background-color: #171717;
    transition-duration: 0.2s;
}

.constUpgradeAvailable {
    background-color: green;
    cursor: pointer;
}

.constUpgradeAvailable:hover {
    background-color: #00b300;
}

.constUpgradeSingle {
    background-color: gold;
}

.constUpgradeSingleAvailable {
    background-color: gold;
    cursor: pointer;
}

.constUpgradeSingleAvailable:hover {
    background-color: #fff4b3;
}

.subtabSwitcher > button.buttonActive {
    background-color: crimson;
}

.subtabContent {
    display: none;
}

.subtabContent.subtabActive {
    display: block;
}

.subtabContent.subtabActive.subtabDisplayFlex {
    display: flex;
    justify-content: center;
}

.subtabContent.subtabActive.subtabDisplayGrid {
    display: grid;
}

.historySubTab {
    color: white;
}

.historySubTab p {
    margin: 8px 0 12px 0;
}

.historySubTab table {
    margin: auto;
    border-collapse: collapse;
    min-width: 100%;
}

.historySubTab tbody {
    text-align: left;
}

.historySubTab tbody img {
    vertical-align: middle;
    height: 20px;
    margin-right: 3px;
}

.historySubTab tbody td {
    padding: 4px 6px;
    margin-right: 10px;
}
.historySubTab tbody .history-gain:last-child { margin-right: 0; }

.historySubTab tbody tr:nth-child(odd) {
    background: #262626;
}

.historySubTab tbody .history-seconds {
    white-space: nowrap;
}

.historySubTab tbody .history-filler {
    padding: 0;
}

.historySubTab tbody *[title] {
    text-decoration: underline;
}

#historyReset,
#historyAnts {
    margin-left: 20px;
}

#historyAscend {
    margin: 0 auto;
}

#historyTogglePerSecondButton {
    float: right;
    transition-duration: 0.15s;
}

#historyTogglePerSecondButton:hover {
    background-color: #333;
}

.onOffToggle {
    text-align: center;
    padding: 5px;
    border: 2px solid red;
}

#historyResetTable {
    min-width: 540px;
}

#historyAntsTable {
    min-width: 700px;
}

#historyAscendTable {
    min-width: 1180px;
}

.historyTableWrap {
    max-height: 450px;
    overflow-y: auto;
}

#historyAscend .historyTableWrap {
    min-width: 1212px;
}

.runeBlessingPurchaseSettings {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

.runeBlessingRow {
    display: flex;
    width: 1200px;
    align-self: center;
    align-items: center;
    white-space: nowrap;
    margin-bottom: 10px;
}

.runeIcons {
    height: 64px;
    width: 64px;
    margin-right: 20px;
}

.runeTexts {
    width: 175px;
}

.runeButtons {
    height: 30px;
    width: 325px;
    border: 1px solid yellow !important;
    margin-right: 15px;
    color: gold;
    transition-duration: 0.15s;
    cursor: default;
}

.runeButtonsAvailable {
    background-color: #222;
    cursor: pointer;
}

.runeButtonsAvailable:hover {
    background-color: #444;
}

#buyRuneBlessingInput {
    width: 60px;
    border: 2px solid crimson;
    margin-right: 20px;
    background-color: #171717;
    color: white;
}

#buyRuneSpiritInput {
    width: 60px;
    border: 2px solid orange;
    margin-right: 20px;
    background-color: #171717;
    color: white;
}

#traits {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 550px;
    max-height: 600px;
}

#corruptionMain {
    width: 800px;
    margin: 10px;
    padding: 10px;
    margin-top: 60px;
}

#corruptionIntroduction {
    font-size: 1.2em;
    color: darkorchid;
}

#corruptionInfo1 {
    color: yellow;
}

#corruptionSelected {
    height: 70px;
    margin-top: 15px;
}

#corruptionDetails {
    display: flex;
    min-height: 150px;
    visibility: hidden;
}

#corruptionName {
    font-size: 1.2em;
    color: red;
}

#corruptionDescription {
    color: darkviolet;
}

#corruptionLevelCurrent {
    color: orchid;
}

#corruptionLevelPlanned {
    color: lime;
}

#corruptionSpiritContribution {
    color: gold;
}

#ascensionAutomation {
    position: relative;
    top: 20px;
    width: 100%;
    min-height: 100px;
}

#ascensionAmount {
    width: 150px;
    border: 1px solid orange;
    color: gold;
    background-color: black;
}

#autoAscend {
    color: white;
}

#ascensionAutoEnable,
#ascensionAutoToggle {
    width: 150px;
    transition-duration: 0.15s;
}

#ascensionAutoEnable:hover,
#ascensionAutoToggle:hover {
    background-color: #333;
}

#corruptionStatsLoadouts {
    width: 500px;
    margin: 10px;
    padding: 10px;
    border: 1px solid orange;
}

#corrStatsBtn,
#corrLoadoutsBtn {
    width: 120px;
    height: 25px;
    border: 2px solid;
    transition-duration: 0.15s;
}

#corrStatsBtn:hover,
#corrLoadoutsBtn:hover {
    background-color: #333;
}

#corrButtonRow {
    min-width: 300px;
}

.corruptionStatRow {
    display: flex;
    flex-flow: row;
    height: 40px;
    margin: 5px 0;
    padding-left: 10px;
}

.corruptionImg {
    height: 100%;
    object-fit: contain;
}

.corrDesc {
    height: 30px;
    min-width: 150px;
    margin: auto;
    text-align: center;
}

.corrBtn {
    width: 30px;
    height: 30px;
    margin: 5px;
    padding: 3px;
    transition-duration: 0.15s;
}

.corrBtn:hover {
    background-color: #333;
}

.corruptionMax {
    border: 2px solid green !important;
}

.corruptionUp {
    border: 1px solid green !important;
}

.corruptionDown {
    border: 1px solid red !important;
}

.corruptionReset {
    border: 2px solid red !important;
}

#corruptionLoadouts {
    height: 410px;
    padding-top: 30px;
    box-sizing: border-box;
}

#corrPicRow {
    height: 30px;
}

img.small {
    height: 32px;
}

.corrSave {
    border: 1px solid dodgerblue;
    margin-left: 10px;
    padding: 3px 4px;
    transition-duration: 0.15s;
}

.corrLoad {
    border: 1px solid #5b5ddc;
    padding: 3px 4px;
    transition-duration: 0.15s;
}

.corrSave:hover,
.corrLoad:hover {
    background-color: #333;
}

#corruptionCleanse {
    height: 30px;
    width: 150px;
    margin: auto 20px auto;
    border: 2px solid darkmagenta;
    transition-duration: 0.15s;
}

#corruptionCleanseConfirm {
    height: 30px;
    width: 100px;
    margin: auto;
    border: 2px solid green;
    visibility: hidden;
    transition-duration: 0.15s;
}

#corruptionCleanse:hover,
#corruptionCleanseConfirm:hover {
    background-color: #333;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

header .img {
    height: 32px;
    width: 32px;
}

.subHeader {
    display: flex;
}

.currenciesContainer {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.currencyRow {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.currencyContainer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 140px;
}

header #coinDisplay {
    color: gold;
}

header #diamondDisplay {
    color: cyan;
}

header #offeringDisplay {
    color: gold;
}

header #mythosDisplay {
    color: plum;
}

header #mythosshardDisplay {
    color: plum;
}

header #particlesDisplay {
    color: limegreen;
}

header #obtainiumDisplay {
    color: pink;
}

.statDisplay {
    padding-left: 6px;
    line-height: 32px;
}

#ascensionStats {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    margin-bottom: 15px;
    line-height: 20px;
    width: 60%;
    justify-content: space-evenly;
}

#ascensionStats > span {
    display: flex;
    white-space: pre;
    align-items: center;
}

#ascensionStats img {
    position: relative;
    height: 20px;
    margin-right: 4px;
}

#ascLen {
    color: darkcyan;
}

#ascC10 {
    color: limegreen;
}

#ascCubes {
    color: yellow;
}

#ascTess {
    color: orchid;
}

#ascHyper {
    color: crimson;
}

#ascPlatonic {
    color: lightgoldenrodyellow;
}

#ascHepteract {
    color: pink;
}

#ascTimeAccel {
    color: royalblue;
}

#ascAscensionTimeAccel {
    color: orange;
}

#tabBorder {
    height: 2px;
    position: relative;
    z-index: 0;
}

.challengeContainer {
    width: 410px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.challengePortion {
    width: 410px;
    height: auto;
    margin: auto;
    color: white;
    text-align: left;
    font-size: 1em;
}

.challengeNumber {
    width: 380px;
    height: auto;
    margin: auto;
    color: white;
    text-align: left;
    font-size: 1em;
}

.platonicUpgradesContainer {
    display: flex;
    flex-direction: column;
    margin-left: 50px;
}

#platonicUpgrades {
    margin-bottom: 50px;
}

.platonicUpgradeImage {
    cursor: pointer;
}

.platonicContainer {
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.platonicPortion {
    width: 380px;
    height: auto;
    margin: auto;
    color: white;
    text-align: left;
    font-size: 1em;
}

#hepteractGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(70px, 105px));
    margin-top: 10px;
    width: calc(105px * 4);
    border: 3px solid plum;
    grid-column: shop 2/4;
    grid-row: 1;
}

#hepteractGrid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.hepteractType > button {
    border: 2px solid pink;
    width: 56px;
    height: 30px;
    transition-duration: 0.15s;
}

.hepteractType > button:hover {
    background-color: #333;
}

#hepteractCraftTexts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-bottom: auto;
}

#hepteractCraftTexts > p {
    width: 750px;
    margin: auto;
}

#hotkeys {
    flex-direction: column;
}

.hotkeys {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    margin: 10px auto;
}

.hotkeyItem {
    display: flex;
    flex-direction: row;
    margin-top: 2px;
}

#hotKeyDesc {
    margin: 0;
}

#hotkeyTooltip {
    color: darkorchid;
}

#actualHotkey {
    padding: 1px 15px;
    color: gold;
    cursor: pointer;
}

#transparentBG {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 6968;
    position: absolute;
    display: none;
}

#saveString {
    max-width: 50vh;
    word-wrap: break-word;
}

#currentBonus {
    color: springgreen;

    /* Remove padding */
    margin: 0;
}