body, html {
    margin: 0;
    height: 100%;
}
.full-height {
    height: calc(100vh - 60px); /* Adjust based on the header height */
    overflow-y: auto;
}
.header h1 {
    font-size: 1.5rem;
    margin: 0;
    padding: 10px;
}
.content-area {
    background-color: #f0f0f0;
    padding: 15px;
}
.card {
    background: #ffffff;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.submenu a {
    display: block;
    padding: 5px 10px;
    cursor: pointer;
}
.submenu a:hover {
    background-color: #e0e0e0;
}
.search-bar {
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
    width: calc(100% - 20px);
    box-sizing: border-box;
}
.highlight-search {
    background-color: #d7d7a7;
}
.config-input-text {
    resize:vertical;
}
.config-input-number {
    width: 100px;
}
.alter-context-select {
    margin-bottom: 0;
    height: 30px;
    border: 1px solid blueviolet;
    border-radius: 50px;
}

#page-header {
    background-color: #f8f8f8;
}

#page-header.j-context {
    background-color: #98004a;
    color: white;
}

#page-header.m-context {
    background-color: #1a2988;
    color: white;
}
#page-header.v-context {
    background-color: #7a3a31;
    color: white;
}
#page-header.jm-context {
    background-color: #1a5d2f;
    color: white;
}
#page-header.jv-context {
    background-color: #16735d;
    color: white;
}
#page-header.jmv-context {
    background-color: #5b3611;
    color: white;
}
#page-header.mv-context {
    background-color: #1a2988;
    color: white;
}
#page-header.j-context a,
#page-header.m-context a,
#page-header.v-context a,
#page-header.jm-context a,
#page-header.jv-context a,
#page-header.jmv-context a,
#page-header.mv-context a {
    color: white;
}
.submenu a.current-menu-item:hover,
.current-menu-item {
    background-color: #c3cce7;
}

#menu-container,
#menu-container .tabs
{
    background-color: var(--primary);
}

#menu-container .tabs a {
    color: white;
}

#menu-container .tabs a:hover
{
    background-color: var(--secondary);
}

#menu-container .tabs .tabs-title.is-active a
{
    background-color: white;
    color: var(--tertiary);
}

#page-header {
    background-color: var(--primary);
    color: white;
}