:root {
    --input-width: 275px;
    --input-height: 75px;
    --slim-height: 54px;
    --input-gap: 16px;
    --border-radius: 4px;
}

@media (max-width: 615px) {
    :root {
        --input-width: 90vw;
    }

    .photo-carousel {
        max-width: 350px;
    }
}

.page {
    display: inline-block;
    padding: 0 auto;
    padding-left: var(--input-gap);
    margin-top: calc(2*var(--input-gap));
    text-align: center;
}

.no_top_margin {
    margin-top: 0;
}

.column {
    display: inline-block;
    margin-right: var(--input-gap);
    text-align: left;
    vertical-align:top;
}

.wr_description {
    display: block;
    margin: 8px;
    max-width: calc(var(--input-width) - var(--input-padding));
}

.wr_progress {
    display: block;
    margin: 0 auto var(--input-gap);
    width: calc(var(--input-width));
    height: calc(var(--input-height)/2);
}

.wr_checkbox, .wr_counter, .wr_button, .wr_dropdown, .wr_string, .wr_number, .wr_text, .wr_select, .wr_card, .column_header, .page_header, .wr_color, .wr_slider, .wr_status {
    display: block;
    font-size: 16px;
    border-style: solid;
    border-width: 0px;
    border-radius: var(--border-radius);
    border-color: var(--border-color);
    margin: 0 auto var(--input-gap);
    padding: var(--input-padding);
    background-color: var(--foreground-color);
    color: var(--foreground-text-color);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.wr_card {
    min-width: calc(var(--input-width) - 2*var(--input-padding));
}

#contents_card.wr_card {
    display: inline-block;
    font-size: var(--font-size);
}

.body_card {
    display: inline-block;
    font-size: var(--font-size);
}

.scalable_card {
    font-size: var(--font-size);
}

.wr_checkbox, .wr_counter, .wr_number, .wr_button, .wr_select_option, .page_header, .column_header, .input_label, .match_option, .pit_option, .wr_status, .wr_description, .wr_multi_option {
    user-select: none;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;
}

.page_header {
    margin-right: var(--input-gap);
    font-size: 24px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    text-align: left;
}

.column_header {
    font-size: 18px;
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.page_color {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.column_color {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.wr_checkbox, .wr_counter, .wr_button, .wr_string, .wr_number {
    width: calc(var(--input-width) - 2*var(--input-padding));
    min-height: calc(var(--input-height) - 2*var(--input-padding));
}

.wr_slider {
    width: var(--input-width);
    height: var(--input-height);
    padding: 0;
}

.wr_slider_range {
    width: var(--input-width);
    height: var(--input-height);
    margin: 0px;
    border-radius: var(--border-radius);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    overflow: hidden;
}

.wr_slider_range::-moz-range-thumb {
    width: 35px;
    height: var(--input-height);
    border-width: 0;
    border-radius: var(--border-radius);
    background-color: var(--active-color);
    box-shadow: calc(var(--input-width) / -2 - var(--border-radius)) 0 0 calc(var(--input-width) / 2) var(--hover-color);
}

/* Can't match multiple pseudo elements in one line, must duplicate */
.wr_slider_range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 35px;
    height: var(--input-height);
    border-radius: var(--border-radius);
    background-color: var(--active-color);
    box-shadow: calc(var(--input-width) / -2 - var(--border-radius)) 0 0 calc(var(--input-width) / 2) var(--hover-color);
}


.wr_spacer {
    display: block;
    width: var(--input-width);
}

.wr_slider.slim, .slim .wr_slider_range {
    height: var(--slim-height);
}

.slim .wr_slider_range::-moz-range-thumb {
    height: var(--slim-height);
}

.slim .wr_slider_range::-webkit-slider-thumb {
    height: var(--slim-height);
}

.wr_checkbox.slim, .wr_counter.slim, .wr_button.slim, .wr_string.slim, .wr_number.slim {
    height: auto;
    min-height: auto;
}

.wr_button.pick_item, .wr_slim_button.pick_item {
    width: calc(var(--input-width)/2 - 2*var(--input-padding));
}

.wr_dropdown {
    width: var(--input-width);
    height: var(--input-height);
    -webkit-appearance: none;
}

.wr_dropdown.slim, .wr_select.slim {
    height: var(--slim-height);
}

.wr_dropdown.label {
    height: auto;
    padding: calc(var(--input-padding)/2);
    margin: 0 auto 0;
    box-shadow: none;
}

.no_input_gap {
    margin: 0 auto 0;
}

.wr_text {
    width: calc(var(--input-width) - 2*var(--input-padding));
    height: calc(2*var(--input-height) + var(--input-gap) - 2*var(--input-padding));
}

.wr_select {
    min-width: var(--input-width);
    height: var(--input-height);
    display: table;
    table-layout: fixed;
    padding: 0px;
}

.wr_button {
    clear: both;
    text-align: center;
}

@media (hover: hover) {
    /* this prevents hover from being show on touch screen devices at all, because it tends to linger */
    .wr_dropdown:hover, .wr_select_option:hover, .wr_multi_option:hover:not(:has(.wr_number_num)), .wr_counter:hover, .wr_checkbox:hover, .wr_button:hover, .wr_string:hover, .wr_text:hover, .wr_color .color_text:hover {
        background-color: var(--hover-color);
        color: var(--hover-text-color);
    }
}

.wr_button > *, .wr_checkbox > *, .wr_counter > *, .wr_dropdown > *, .wr_string > *, .wr_number > *, .wr_text > *, .wr_slider > *, .wr_status > * {
    line-height: calc(var(--input-height) - 2*var(--input-padding));
}

.wr_checkbox.slim > *, .wr_counter.slim > *, .wr_button.slim > *, .wr_string.slim > *, .wr_number.slim > * {
    line-height: calc(var(--slim-height) - 2*var(--input-padding));
}

.wr_counter_count, .wr_number_num, .wr_multi_number_num {
    font-size: 200%;
}

.wr_number {
    overflow: hidden;
}

.wr_number_num {
    font-size: 200%;
    float: right;
}

.wr_select_row {
    display: flex;
}

.wr_select_option {
    height: calc(var(--input-height) - 2*var(--input-padding));
    line-height: calc(var(--input-height) - 2*var(--input-padding));
    padding: var(--input-padding);
    text-align: center;
    border-radius: var(--border-radius);
}

.wr_multi_option {
    height: calc(var(--input-height) - 2*var(--input-padding));
    line-height: calc(var(--input-height) - 2*var(--input-padding));
    padding: var(--input-padding);
    border-radius: var(--border-radius);
}

.wr_select_filler {
    height: calc(var(--input-height) - 2*var(--input-padding));
    display: table-cell;
    border-radius: var(--border-radius);
}

.wr_select_img {
    line-height: 0px;
    padding: 0px;
    height: var(--input-height);
}

.wr_select_img > img {
    height: var(--input-height);
}

.vertical {
    display: block;
}

.wr_select_option.slim, .wr_select.slim > .wr_select_option {
    height: calc((var(--slim-height) - 2*var(--input-padding)));
    line-height: calc((var(--slim-height) - 2*var(--input-padding)));
}

.wr_color, .wr_status {
    width: var(--input-width);
    height: var(--input-height);
    padding: 0;
}

.color_text {
    display: inline-block;
    width: calc(var(--input-width) - var(--input-height) - 2*var(--input-padding));
    height: calc(var(--input-height) - 2*(var(--input-padding)));
    float: left;
    padding: var(--input-padding);
    border: none;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    font-size: 16px;
    background-color: var(--foreground-color);
    color: var(--foreground-text-color);
}

.color_box {
    display: inline-block;
    width: var(--input-height);
    height: var(--input-height);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.selected {
    background-color: var(--active-color);
    color: var(--active-text-color);
}

.input_label {
    margin: 8px;
    max-width: calc(var(--input-width) - var(--input-padding));
}

.disabled {
    color: var(--disabled-text-color);
    background-color: var(--disabled-color);
    box-shadow: unset;
}

.cycle {
    background-color: #FF00FF22;
}

.red_box {
    box-shadow: 0 4px 8px 0 rgba(255, 0, 0, 0.2), 0 6px 20px 0 rgba(255, 0, 0, 0.19);
}

.blue_box {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 255, 0.2), 0 6px 20px 0 rgba(0, 0, 255, 0.19);
}

.thin {
    width: auto;
    min-width: 0;
}

.photo-carousel, .scouting-carousel {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
}

.photo-carousel > img, .scouting-carousel > .page {
    scroll-snap-align: start;
    white-space: normal;
}

.photo-carousel > img {
    vertical-align: middle;
    width: 100%;
    max-height: 550px;
    object-fit: cover;
}

.scouting-carousel > .page {
    vertical-align: top;
    width: 100%;
    padding: 0;
}

.scouting-carousel > .page > .page_header {
    margin-right: 0px;
}

.scouting-carousel > .page > .column {
    margin-left: calc(var(--input-gap)/2);
    margin-right: calc(var(--input-gap)/2);
}

.profile {
    text-align: center;
    padding: 0;
}

.stack {
    display: block;
    border-style: solid;
    border-width: 0px;
    border-radius: var(--border-radius);
    border-color: var(--border-color);
    margin: 0 auto var(--input-gap);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: var(--foreground-color);
    text-align: center;
}

.stack_top, .stack_middle, .stack_bottom {
    box-shadow: none;
}

.stack_top {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.stack_middle {
    margin-bottom: 0;
    border-radius: 0;
    border-top: 1px solid lightgray;
}

.stack_bottom {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px solid lightgray;
}

.stack_horizontal {
    display: inline-block;
    margin-bottom: 0;
    border-radius: 0;
}

.stack_middle .stack_middle {
    border-top: none;
}

.stack_bottom .stack_bottom {
    border-top: none;
}

.stack_horizontal_parent {
    display: inline-flex;
}

.elim_match {
    text-align: center;
}

.elim_match.complete {
    background-color: lightgray;
}

.elim_match h3, .elim_match h5 {
    margin-top: 0;
    margin-bottom: 0;
}

.elim_match div {
    margin-top: 10px;
}

.elim_match button {
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 0;
    width: 100px;
}

.wr_card .card_body {
    text-align: left;
    padding: var(--input-padding);
}

.links {
    text-align: center;
    display: flex;
    justify-content: space-between;
}