div.field-diagram-container {
    position: relative;
    max-width: 80dvw;
}

div.field-diagram-container > img {
    width: 100%;
}

div.field-diagram-container > button {
    width: 25%;
}

div.field-diagram-container > button > img {
    width: 100%;
    margin: auto;
}

div.fuel-counter {
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    width: fit-content;
    min-width: 100%;
    box-sizing: border-box;
    max-width: 80dvw;
    margin: 1rem;
    gap: 0.5rem;
    background-color: var(--bg-medium);
    padding: 1rem;
    border-radius: 1rem;
}

div.fuel-counter > h1 {
    grid-column: 1 / span 3;
    grid-row: 1;
    text-align: center;
    font-size: 3rem;
    margin: 0.5rem;
    font-weight: normal;
}

div.fuel-counter > button:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2;
    width: 4rem;
    height: 4rem;
    padding: 0;
    font-size: 2rem;
}

div.fuel-counter > button:nth-of-type(2) {
    grid-column: 1;
    grid-row: 3;
    width: 4rem;
    height: 4rem;
    padding: 0;
    font-size: 2rem;
}

div.fuel-counter > input {
    grid-column: 2;
    grid-row: 2 / span 2;
    text-align: center;
    font-size: 2rem;
    min-width: 0;
}

div.fuel-counter > button:nth-of-type(3) {
    grid-column: 3;
    grid-row: 2;
    width: 4rem;
    height: 4rem;
    padding: 0;
    font-size: 2rem;
}

div.fuel-counter > button:nth-of-type(4) {
    grid-column: 3;
    grid-row: 3;
    width: 4rem;
    height: 4rem;
    padding: 0;
    font-size: 2rem;
}

div.fuel-counter > button:nth-of-type(5) {
    grid-column: 1 / span 3;
    grid-row: 4;
    font-size: 2rem;
}

div.labeled-input {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

div.labeled-input > label {
    font-size: 2rem;
}

div.labeled-input:has(input[type="text"]) > label,
div.labeled-input:has(input[type="number"]) > label,
div.labeled-input > input[type="text"],
div.labeled-input > input[type="number"] {
    font-size: max(16px, min(2rem, 4dvw));
    min-width: 0;
}

div.labeled-input > input[type="checkbox"] {
    width: 2rem;
    height: 2rem;
}

div.labeled-input > input[type="radio"] {
    width: 1rem;
    height: 1rem;
}

div.popup-input-blocker {
    display: flex;
    flex-flow: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    align-items: center;
    justify-content: center;

    background-color: rgba(0, 0, 0, 0.3);
}

div.popup-input-blocker > div {
    display: flex;
    flex-flow: column;
    background-color: var(--bg);
    padding: 2rem;
    border-radius: 1rem;
    font-size: 1rem;
}

div.batch-score-container > div {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: auto auto auto auto;
    gap: 0.5rem;
}

div.batch-score-container > div > input {
    font-size: max(16px, 1rem);
    grid-column: 2;
    margin: auto;
}

div.batch-score-container > div > .number-slider {
    grid-column: span 2;
    gap: 1rem;
    grid-template-columns: 1fr 5rem;
}

div.batch-score-container > div > button:first-of-type {
    grid-column: 1;
    grid-row: 4;
}

div.batch-score-container > div > button:last-of-type {
    grid-column: 2;
    grid-row: 4;
}

div.starting-shift-prompt-container, 
div.starting-shift-prompt-container > div {
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
}

div.starting-shift-prompt-container > *,
div.starting-shift-prompt-container> div > * {
    flex-grow: 1;
    text-align: center;
}

div.checkbox-group, div.radio-group {
    display: flex;
    flex-flow: column;
    align-items: center;
    background-color: var(--bg-medium);
    padding: 1rem;
    border-radius: 1rem;
    width: 100%;
    box-sizing: border-box;
}

div.checkbox-group > h1 {
    margin: 0.5rem;
}

div.radio-group > div > label {
    font-size: 2rem;
}

div.radio-group > div > input[type="radio"] {
    height: 1rem;
    width: 1rem;
}

div.climb-time-container {
    align-items: stretch;
    gap: 2rem;
}

div.climb-time-container > label {
    width: min-content;
}

div.climb-time-container > input {
    min-width: 0;
    width: 8rem;
    text-align: center;
}

div.comments-container {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100%;
}

div.comments-container > textarea {
    width: 100%;
    font-size: 1rem;
}

div.number-slider {
    width: 100%;
    display: grid;
    grid-template-columns: 4fr 1fr;
    justify-items: stretch;
    align-items: center;
}

div.number-slider > * {
    font-size: 2rem;
}

div.number-slider > h2 {
    grid-column: span 2;
    text-align: center;
    margin: auto;
}

div.number-slider > output {
    text-align: center;
    margin: auto;
}

div.number-slider > input {
    appearance: none;
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    flex-grow: 1;
    border-radius: 1rem;
}

/* Special styling for WebKit/Blink */
div.number-slider > input::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--blue-alliance-light);
    box-sizing: content-box;
    border-radius: 100%;
    height: 1rem;
    width: 1rem;
    cursor: pointer;
    transform: scale(150%, 150%);
}

/* All the same stuff for Firefox */
div.number-slider > input::-moz-range-thumb {
    background: var(--blue-alliance);
    border-radius: 100%;
    height: 2rem;
    width: 2rem;
    cursor: pointer;
}

div.number-slider > input:hover::-webkit-slider-thumb {
    background-color: var(--blue-alliance);
}

div.number-slider > input:hover::-moz-range-thumb {
    background-color: var(--blue-alliance);
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

button.match-selection {
    height: 6rem;
    width: 90dvw;
    font-size: 2.5rem;
}

button.match-selection.red {
    background-color: var(--red-alliance);
}

button.match-selection.red:hover {
    background-color: var(--red-alliance-light);
}


button.match-selection.blue {
    background-color: var(--blue-alliance);
}

button.match-selection.blue:hover {
    background-color: var(--blue-alliance-light);
}