body {
    background-color: #313031;
    font-family: 'Titillium Web', sans-serif;
    color: #ffe6c0;
}

table, th {
    border: 2px solid white;
    border-collapse: collapse;
}

th {
    color: #c7a26b;
    font-weight: 900;
    padding: 1rem;
}

td {
    border-bottom: 1px solid rgb(255, 255, 255);
    padding: 0.5rem;
}

tr:hover {
    background-color: #313031;
}

h2 {
    color: #c7a26b;
    font-weight: 900;
}

input {
    background-color: #4d4b47;
    border:none;
    border-radius: 1px;
}

input[type=text] {
    float: right;
    color: #ffe6c0;
}

input[type=number] {
    float: right;
    color: #ffe6c0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

select {
    background-color: #4d4b47;
    color: #ffe6c0;
    border: none;
    float: right;
    width: 9rem;
    padding: 0.07rem;
    -webkit-appearance: none;
}

.gridContainer {
    display: grid;
    grid-template-columns: 20% auto;
    grid-template-rows: 7% 93%;
    gap: 10px;
    height: 97.5vh;
}

.navBar {
    display: flex;
    align-items: center;
    border-radius: 5px;
    grid-column-start: 1;
    grid-column-end: 4;

    background-color: #383735;
}

.barButton {
    margin: 0.5rem;
    padding: 0.7rem;
    border-radius: 5px;
    
    color: #c7a26b;
    font-weight: 900;
    font-size: 0.9rem;
    text-decoration: none;
    border: none;

    background-color: #44423f;
}

.barButton:hover {
    background-color: #313031;
}

.menu {
    border-radius: 5px;
    padding: 0.5rem;

    background-color: #383735;
}

.menuButton {
    margin-left: 0;
}

.display {
    border-radius: 5px;
    grid-column-start: 2;
    grid-column-end: 4;
    padding: 0.5rem;
    overflow: auto;

    background-color: #383838;
}

.searchContainer {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 0.5rem;
}

#searchSubmit {
    margin: 0.5rem;
}

#searchText {
    float: none;
}

@keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fadein {
    animation: fadein 0.6s;
}

@keyframes fadeout {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.fadeout {
    animation: fadeout 0.6s;
}