*, *::before, *::after {
    box-sizing: border-box;
}
*:not(dialog) {
    padding: 0;
    margin: 0;
}

body {
    padding: 60px;
}

svg {
    margin: 0;
    fill: white;
}

button {
    border: solid black 1px;
    border-radius: 8px;
    padding: 2px;
    display: flex;
    justify-content: center;
}
button:hover {
    cursor: pointer;
}

.delete-button {
    background-color: hsl(0, 86%, 61%);
}
.delete-button:hover {
    background-color: hsl(0, 86%, 40%);
}

.edit-button {
    background-color: hsl(198, 86%, 61%);
}
.edit-button:hover {
    background-color: hsl(198, 86%, 40%);
}

table.searchResults {
    border-collapse: collapse;
}

table.searchResults th {
    padding: 5px;
    border: solid 1px black;
}

table.searchResults td {
    padding: 5px;

    border-left:   solid 1px black;
    border-right:  solid 1px black;
    border-bottom: dashed 1px black;
}

table.searchResults tbody tr:last-child td {
    border-bottom: solid 1px black;
}

datalist {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 400px;
}

option {
  padding: 0;
}

input[type="range"] {
  width: 400px;
  margin: 0;
}

td input[type="text"] {
    width: 100%;
}

img:hover {
    scale: 1.75;
}

td:has(img) {
    text-align: center;
}

label {
    vertical-align: top;
}

td:has(label) {
    text-align: right;
    padding-right: 10px;
}

tr#add-row td {
    border: dashed 1px black;
    text-align: center;
}

.add-button {
    background-color: hsl(121.23 68% 40%);
}

.priceSlider {
    display: inline-block;
}