:root{
  --footer-h: 100px;
}

html, body {
    height: 100vh;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    padding-bottom: var(--footer-h);
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-h);
}

main.container {
    height: calc(100% - var(--footer-h) + 50px);
    display: flex;
    flex-direction: column;
}

.card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

#mapping-table {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

/* Tabulator settings */

/* Zebra striping */
.tabulator .tabulator-row:nth-child(even) {
    background-color: #f9f9f9;
}

.tabulator .tabulator-row:hover {
    background-color: #e6f2ff;
}