[data-theme="light"] {
    --color-bg: #ffffff;
    --color-fg: #000000;
    --color-shaded: #ececec;
    --color-highlight: #ffff00;
    --color-input-text-bg: #ffffbb;
    --color-input-text-fg: #000000;
    --color-input-text-border: #ffffff;
    --color-button-bg: #f3f3f3;
    --color-button-fg: #000000;
}
  
[data-theme="dark"] {
    --color-bg: #494949;
    --color-fg: #ffffff;
    --color-shaded: #292929;
    --color-highlight: #0059BF;
    --color-input-text-bg: #000044;
    --color-input-text-fg: #ffffff;
    --color-input-text-border: #000000;
    --color-button-bg: #3f3f3f;
    --color-button-fg: #ffffff;
}

body {
    background-color: var(--color-bg);
    color: var(--color-fg);
}

button {
    background-color: var(--color-button-bg);
    color: var(--color-button-fg);
    border-width: 1px;
    border-radius: 3px;
}

 input[type=text], input[type=number] {
    background-color: var(--color-input-text-bg);
    border-color: var(--color-input-text-border);
    color: var(--color-input-text-fg);
    text-align: right;
    border: none;
    box-shadow: 0 0 1px 1px var(--color-shaded) inset;
}

 select {
    background-color: var(--color-shaded);
    color: var(--color-fg);
 }
 
#currentAmountsTable {
    margin-top: 50px;
}


#currentAmountsTable input {
    width: 120px;
    text-align: right;
}

#currentAmountsTable th {
    background-color: var(--color-shaded);
}

#currentAmountsTable td {
    text-align: right;
}

.padRight {
    padding-right: 20px;
}

#buyAmountsTable {
    margin-top: 50px;
}

#buyAmountsTable input {
    width: 220px;
    text-align: right;
    
}

#buyAmountsTable th {
    background-color: var(--color-shaded);
}

#buyAmountsTable td {
    text-align: right;
    padding: 0 5px;
}

#fruitsTable {
    margin-top: 50px;
     
}

.fruitTierRadio {
    display: none;
}

.fruitTierRadioLabel {
    display: inline-block;
    width: 20px;
    text-align: center;
    border: solid 1px #333;
    user-select: none;
    background-color: var(--color-shaded);
}

.fruitTierRadioLabel:hover {
    background-color: var(--color-highlight);
}

.fruitTierRadio:checked + label {
    background-color: var(--color-highlight);
    font-weight: bold;
}

#dcTable {
    margin-top: 50px;
}

#dcTable th {
    background-color: var(--color-shaded);
}

#dcTable td {
    width: 110px;
    text-align: center;
}

.syncButton {
    float: right;
    height: 16px;
    line-height: 16px;
}

/* .syncButton:hover {
    background-color: #898989;
    color: white;
} */