:root{
    --color-background: hsl(0, 0%, 96%);
    --color-header: hsl(171, 100%, 41%);
    --color-footer: hsl(0, 0%, 86%);
    --color-aside: hsl(171, 100%, 30%);
    --color-aside-hover: hsl(171, 100%, 20%);
    --color-aside-icons: hsl(0, 0%, 93%);
    --color-toolbar: hsla(171, 100%, 30%, 0.60);
    --color-toolbar-hover: hsl(171, 100%, 20%);
    --color-toolbar-icons: hsl(0, 0%, 93%);
    --color-statusbar: hsl(0, 0%, 93%);
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
}

#website {
    display: grid;
    grid-template-rows: minmax(64px, 64px) minmax(456px, 12fr) minmax(50px, 1fr);
    grid-template-areas:
        "header"
        "app-area"
        "footer";
    height: 100vh;
    background-color: var(--color-background);
}

#website > main {
    grid-area: app-area;
    overflow: auto;
    padding: 1em;
    grid-area: app-area;
    align-self: auto;
}

#app {
    grid-area: app-area;
    display: grid;
    grid-template-columns: 32px minmax(550px, 1fr);
    grid-template-rows: minmax(456px, 1fr);
    grid-template-areas: "sidebar main";
}

header {
    grid-area: header;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "header-title header-options";
    display: grid;
    background-color: var(--color-header);
}

div #header-title {
    grid-area: header-title;
    padding-left: 32px;
}

div #header-options {
    grid-area: header-options;
    display: flex;
    justify-content: flex-end;
    align-self: center;
    padding-right: 32px;
}

div #header-options button {
    margin-left: 5px;
}

aside {
    grid-area: sidebar;
    background-color: var(--color-aside);
}

aside div {
    height: 32px;
}

aside div:hover {
    background-color: var(--color-aside-hover);
    cursor: pointer;
}

aside svg.iconify {
    font-size: 32px;
    color: var(--color-aside-icons);
}

#app main {
    grid-area: main;
}

#app main#app-view {
    overflow: auto;
    padding: 1em;
}

#app main#map-view {
    align-self: stretch;
    display: grid;
    grid-template-rows: minmax(32px, 32px) minmax(300px, 2fr) minmax(100px, 1fr) minmax(24px, 24px);
    grid-template-areas:
        "toolbar"
        "map"
        "data-tables"
        "statusbar";
}

main div#toolbar {
    grid-area: toolbar;
    display: none;
    justify-content: center;
    height: 32px;
    align-self: center;
    background-color: var(--color-toolbar);
    z-index: 2;
}

main div#toolbar div {
    width: 32px;
}

main div#toolbar div:hover {
    background-color: var(--color-toolbar-hover);
    cursor: pointer;
}

main div#toolbar svg.iconify {
    font-size: 32px;
    color: var(--color-toolbar-icons);
}

main div#map {
    grid-area: toolbar / toolbar / data-tables / data-tables;
    align-self: stretch;
    z-index: 1;
}

main div#data-tables {
    grid-area: data-tables;
    display: none;
    align-self: stretch;
    overflow-y: scroll;
    position: relative;
}

main div#data-tables div.tabs {
    margin-bottom: 0;
    position: sticky;
    top: 0;
    background: white;
    z-index: 3;
}

main div#statusbar {
    grid-area: statusbar;
    align-self: end;
    background-color: var(--color-statusbar);
}

main div#statusbar span{
    padding-left: 5px;
}

footer {
    color: #4a4a4a;
    grid-area: footer;
    align-self: stretch;
    padding-top: 10px;
    padding-left: 32px;
    background-color: var(--color-footer);
}

/* BULMA FIXES */
#header-options > .field.has-addons {
    margin-bottom: 0;
}

.table tr.is-selected {
    background-color: var(--color-aside);
    color: var(--color-aside-icons);
}

.tabs.is-boxed a:hover {
    background-color: #e8e8e8;
    border-bottom-color: #dbdbdb;
}

.table.is-hoverable tbody tr:not(.is-selected):hover {
    background-color: #e8e8e8;
}

.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
    background-color: #e8e8e8;
}

.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
    background-color: #e8e8e8;
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: #f2f2f2;
}