html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--portalThemeColor8);
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: var(--portalThemeColor8);
    z-index: 1000; /* Ensure the header stays above other content */
}

#page {
    display: flex;
    flex-direction: column;
    height: calc(100% - 60px); /* Subtract the header height */
    margin-top: 60px; /* Ensure content starts below the header */
    overflow: auto; /* Allow the content to be scrollable */
}

#content {
    flex: 1 1 auto; /* Allow content to grow and shrink */
    padding-bottom: 20px; /* Ensure footer is always visible */
}

#footer {
    flex: 0 0 auto; /* Fixed height for the footer */
}

.navbar-inverse .navbar-nav > li > a:hover {
    background-color: var(--portalThemeColor4);
    color: var(--portalThemeOnColor4);
    text-decoration: Underline;
}