* {
    font-family: Arial;
    text-transform: uppercase;
}

button {
    user-select: none;
}


html {
    height: -webkit-fill-available;
}

body {
    margin: 0px;
    min-height: 100vh;
    min-height: -webkit-fill-available;

    /* height: calc(var(--vh, 1vh) * 100); */
    /* border-bottom: 1px solid greenyellow; */
    background-color: #006B9F;
}

main {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-height: 100vh;
    min-height: -webkit-fill-available;
    max-height: -webkit-fill-available;
    padding: 3%;
    /* border: 1px solid blue; */
    background-color: #006B9F;
    /* border-bottom: 1px solid pink; */
}

header {
    background-color: white;
}

header,
.results {
    padding: 3%;
}

h1 {
    margin: 0;
    color: red;
}

.results {
    background-color: white;
    display: flex;
    flex-grow: 1;
    overflow-y: scroll;
}

.results dt {
    font-weight: bold;
}

.results dd ul,
.results dd ol {
    padding-left: 0;
}

.results dd li {
    display: flex;
    text-indent: 10% hanging;
}

.results .outdated {
    /* color: darkgray; */
    text-decoration: line-through;
}

.suggestions {
    display: flex;
    min-height: 15vh;
}

.suggestions-list {
    display: flex;
    padding-left: 0px;
    overflow-x: scroll;
}

.suggestions-list>li {
    display: flex;
}

.suggestions-list>li>button {
    color: black;
    border-radius: 0 !important;
    border-width: 2px;
    border-style: outset;
    background-image: linear-gradient(gray, white); 
}

.suggestions-list>li>button:active {
    background-image: linear-gradient(white, gray); 
}

.suggestions-list>li::marker {
    display: none;
}

.selected>button {
    font-weight: bold;
}

.search-wrapper {
    display: flex;
    min-height: 8vh;
}

.search {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.form-row.basic-search {
    display: flex;
    justify-content: space-around;
    background-image: linear-gradient(rgb(255, 255, 0), rgb(128, 128, 0)); ;
    flex-grow: 1;
    margin-right: 1%;
    touch-action: pan-x pan-y;
    overflow: scroll;
}

.form-row.basic-search #name {
    margin: 2%;
    background: none;
    border-radius: 0 !important;
    border-color: white;
    border-width: 2px;
    border-style: outset;
}

.form-row.basic-search label {
    display: inline;
    align-content: center;
    vertical-align: middle;
    /* font-weight: bold; */
    text-decoration: underline;
}

.search-button,
.clear-button {
    min-width: 15%;
    border-radius: 0 !important;
    font-size: inherit;
    font-weight: normal !important;
    color: black;
    border-width: 2px;
    border-style: outset;
}

.clear-button {
    margin-right: 1%;
    border-color: red;
    background-image: linear-gradient(rgb(255, 0, 0), rgb(140, 0, 0)); 
}

.clear-button:active {
    transition: ease-out 1s;
    background-image: linear-gradient(rgb(140, 0, 0), rgb(255, 0, 0)); 
}


.search-button {
    border-color: rgb(0, 255, 0);
    background-image: linear-gradient(rgb(0, 255, 0), rgb(0, 140, 0)); 
}

.search-button:active {
    transition: ease-out 1s;
    background-image: linear-gradient(rgb(0, 140, 0), rgb(0, 255, 0)); 
}



/* some weird stuff to hide other results sections when only 1 result in all results */
.results:has(.all-results-list li:only-child) .most-recent,
.results:has(.all-results-list li:only-child) .best-unit-price {
    display: none;
}