:root {
    --main-col-width: 300px;
    --button-width: 300px;
    --grid-color: #FF00FF 0;
    --grid-width: transparent 2px;
    --grid-spacing-x: transparent 150px;
    --grid-spacing-y: transparent 150px;
}

#timeContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 5%;
    margin-right: 3%;
    margin-left: 3%;
    padding-right: 5%;
    padding-left: 5%;
}

#startButtonContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-right: 20%;
    margin-left: 20%;
    margin-top: 10%;
    padding: 5%;
}

#formDiv {
    min-width: 400px;
    margin: 0 auto;
}

#fileSubmit {
    width: var(--button-width);
    height: var(--button-width);
}

#curvesButtons {
    display: flex;
    justify-content: center;
}

#medianOptions {
    display: flex;
    justify-content: center;
}

#referenceButtons {
    display: flex;
    justify-content: center;
}

.rows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: var(--main-col-width);
}

.rows > div {
    margin-bottom: -50px;
}

.row > .column {
    min-width: var(--main-col-width);
    max-width: 100%;
    justify-content: center;
}

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

.bg-grid {
    display: inline-table; /* shrink/expand to fit content */
    position: relative;
    vertical-align: top;
}
.bg-grid img {
    display: block;
}

/*  Needed to make this :after" instead of :before to avoid bugs.
    Codepen: https://codepen.io/gc-nomade/pen/oeXOmN
    Also see: https://css-tricks.com/almanac/selectors/a/after-and-before/
*/
.bg-grid:after {
    position: absolute;
    content: '';
    background-image: repeating-linear-gradient(0deg,transparent, var(--grid-color), var(--grid-width), var(--grid-spacing-x)), 
                    repeating-linear-gradient(-90deg,transparent, var(--grid-color), var(--grid-width), var(--grid-spacing-y));
    pointer-events: none;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.checkParent {
    text-align: center;
}

.checkChild {
    display: inline-block;
    padding: 10px;
}

.field:not(:last-child) {
    margin-bottom: 0.4rem;
}

/* Used to hide empty reference image
    https://stackoverflow.com/a/39540404
*/
[src=""] {
    visibility: hidden;
}

@media only screen and (max-width: 800px) {
    .button.is-medium {
        margin-top: 10%;
    }

    .rows {
        margin-top: 5%;
    }

    .rows > div {
        margin-bottom: -12%;
    }

    .row {
        margin-top: -25px;
    }
}