body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    color: var(--text) !important;
    background-color: var(--bg) !important;
    font-size: var(--font-size);
    font-family: var(--font-family);
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 56px - 64px);
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: #454545 var(--primary) !important;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: var(--primary) !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-right: 4px solid transparent;
    background-color: #454545;
    border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #121212;
}

.header {
    position: sticky;
    top:0;
}

nav {
    font-size: var(--nav-font-size) !important;
    color: var(--nav-text);
}
nav a {
    color: var(--nav-text) !important;
    margin-right:16px;
}

#mainNav {
    position: absolute;
    right:8px;
}

main {
    flex: 1 0 auto;
}

footer {
    /*background-color: var(--footer-color);
    border-top: 8px solid var(--footer-accent);*/
    color: var(--footer-text);
    font-size: var(--footer-font-size);
    padding: 16px 16px;
}

footer a {
    font-weight: 600;
    color: var(--footer-text);
    text-decoration: none;
}
footer a:hover {
    color: var(--footer-text);
    text-decoration: underline;
}

a.navbar-brand {
    margin:0 0 0 16px;
    padding:0;
    max-height: 48px;
    color: var(--accent-secondary);
    font-weight: bold;
}

.navbar-brand img {
    position: relative;
    top: 0px;
    left: 0px;
    max-height: 64px;
    margin-right: 32px;
    filter: drop-shadow(1px 1px 8px #666);
}
.avatar img {
    width:128px !important;
    height: auto;
}

.badge.project-label {
    float:left;
    width:80px;
    line-height: unset;
}

.alert {
    font-size: 11pt;
    padding: 16px 32px 0 32px;
    line-height: unset;
}

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px rgba(0,0,0,0) inset !important;
}

.input_hours {
    width: 64px;
}

/* DEVEXTREME OVERRIDES */
.dx-widget, .dx-widget {
    color: var(--text) !important;
    font-size: 12pt !important;
}
.dx-pager .dx-page-sizes .dx-selection, .dx-pager .dx-pages .dx-selection {
    background-color: var(--primary) !important;
    color: var(--accent-secondary);
}