body {
    margin: 0 auto;
}

.nav-bar {
    z-index: 1000;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

.nav-surface {
    text-align: center;
    color: #ddca9f;
    background-color: #633300;
    font-family: "Roboto", sans-serif;
}

.nav-drawer.nav-drawer--left {
    z-index: 1001;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 40%;
    border-spacing: 0;
    border-collapse: collapse;
}

.nav-drawer.nav-drawer--right {
    z-index: 1001;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 40%;
    border-spacing: 0;
    border-collapse: collapse;
}

.nav-drawer__item {
    width: 100%;
}

.nav-bar .nav-bar__time {
    border: none;
    border-top: 2px solid black;
    background-color: #633300;
}

.nav-drawer tr:last-child .nav-drawer__item {
    border: none;
    border-top: 2px solid black;
    background-color: #633300;
}

.nav-drawer tr:not(:last-child) .nav-drawer__item {
    border: 1px solid black;
}

.nav-drawer tr:not(:last-child) .nav-drawer__item:hover {
    background-color: #774400;
    cursor: pointer;
}

.nav-drawer tr:last-child .nav-drawer__item:not(:empty):hover {
    background-color: #774400;
    cursor: pointer;
}

.nav-bar .nav-bar__time:hover {
    background-color: #633300;
    cursor: default;
}

.nav-drawer tr:last-child .nav-drawer__item:empty:hover {
    background-color: #633300;
    cursor: default;
}

.nav-drawer.nav-drawer--left tr:last-child .nav-drawer__item {
    text-align: left;
    padding-left: 15px;
}

.nav-drawer.nav-drawer--right tr:last-child .nav-drawer__item {
    text-align: right;
    padding-right: 15px;
}

.nav-drawer__row--left,
.nav-drawer__row--right {
    display: none;
}