:root {
    --cream: #FCF9EA;
    --white: #FFF;
    --dark-brown: #572711;
    --light-brown: #D1B48C;
    --beige: #D1B48C;
    --mid-brown: #987555;
    --pale-mid-brown: #BA9976;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
}

#r4w-logo {
    width: 200px;
    height: 40px;
    vertical-align: middle;
}

#good-cup-logo {
    width: 300px;
    height: 300px;
    vertical-align: middle;
}

header {
    color: #000;
    background-color: #FFF;
    padding: 5px 10px;
    margin-bottom: 20px;
    text-align: center;
}

header h1 {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    font-size: 110%;
    font-weight: bold;
}

header a {
    color: #FFF;
}

footer {
    color: #FFF;
    background-color: #284242;
}

#calculator {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px 5px;
}

.calculator-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.calculator-column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.calculator-panel {
    margin: 5px;
}

.panel-heading {
    color: #572711;
    text-align: center;
    margin-top: 0.5em;
}

.panel-content {
    background-color: #fcf9ea;
    padding: 5px;
    justify-content: center;
}

.slider-collection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.slider-box {
    text-align: center;
    margin: 5px 10px;
    display: inline;
    /*flex: 1 1 auto;*/
}

.slider-title {
    font-size: 12pt;
    font-weight: bold;
}

.slider-wrapper {
    padding: 0;
}

.slider-readout {
}

.slider {
    width: 275px;
    --summbit-discrete-slider-progress-color: var(--dark-brown);
    --summbit-discrete-slider-track-width: 4px;
    --summbit-discrete-slider-track-color: var(--light-brown);
}

#washing-strategy-controls {
    text-align: center;
}

#washing-strategy-controls label {
    font-size: 12pt;
    font-weight: bold;
}

.conclusion-figures {
    text-align: right;
}

.conclusion-figures span {
    font-weight: bold;
    color: var(--dark-brown);
}

h3 {
    color: var(--dark-brown);
    margin: 0.2em 0.3em;
}

#calculator p {
    text-align: center;
    margin: 0.25em 1em;
}

#technology-and-cups {
    background-color: var(--dark-brown);
    color: var(--white);
    text-align: center;
}

#technology-and-cups p {
    margin: 1em 0;
    padding: 0.25em;
}