:root{
  --cassiopeia-color-primary:#ED8C00;
  --cassiopeia-color-link:#003366;
  --cassiopeia-color-hover:#ED8C00;
}
html {
    background-color: #E9EDF2;
}
.container-header .grid-child {
    padding: 0em;
    padding-bottom: 0em;
}
.container-search {
    margin-right: 1.5rem;
}
header.container-header.full-width {    
    border-radius: .5rem;
    margin: auto;
    max-width: 58.5rem;
}
.container-header .navbar-brand img {
    width: 100rem;
    min-width: 3rem;
}
.container-header .mod-menu {
    color: #003366;
    background-image: linear-gradient(180deg,#e9edf2,#B2C2D1);
    background-clip: border-box;
    border: 1px solid #B2C2D1;
    border-radius: .5rem;
}
.container-header .mod-menu .parent>ul {
    color: #003366;
    background-color: #E2E8EE;
    background-clip: border-box;
    border: 1px solid #B2C2D1;
    border-radius: .25rem;
}
.metismenu.mod-menu .metismenu-item.active>a, .metismenu.mod-menu .metismenu-item.active>button, .metismenu.mod-menu .metismenu-item>a:hover, .metismenu.mod-menu .metismenu-item>button:hover {
    text-decoration: underline;
    color: #ed8c00;
}
.metismenu.mod-menu .metismenu-item {
    padding: .5em .5em;
    font-size: 1.1rem;
    line-height: 1.5;
}


/*    de edit knop staat over de tekst van menu, search en sitemenu-'s heen, oplossing voor nu; */

.btn.jmodedit {
  position: absolute;    /* oud op relative, nu weer op  org: absolute */
  top: 15px;        /* was 0, nu 15px ter voorkomen van tekst over elkaar in top-menu  */
  right: 0; 
  left: auto;
  z-index: 900;
  color: #7AC143;    /* extra groene tekst 7AC143 was color: var(--cassiopeia-color-link); */
  background-color: rgba(255, 255, 255, 0.0);   /*  bg kleur met optie transparantie, kleur 255 3x en transparantie van 0.0 tot 0.99.  zet border ook op 0 indien bg 0.0  */
/* background-color: transparent; OUD, new zie hierboven,  was white nu transparent, popup witte bg kleur van edit knop  */
  border: 0px solid #dfe3e7;        /* border 2 nu op 0 */
  border-radius: 0.25rem;        /* nvt indien border 0 */

}
.btn-primary {
    color: #fff;
    background-color: #ED8C00;
    border-color: #22485D;
}
.breadcrumb {
    background-color: #e9edf2);
    border: 1px solid #B2C2D1;
    border-radius: .25rem;
}
body {
    color: #4F4F4F;
    background-color: #E9EDF2;
}
body h1,h3 {
  color: #003366;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #E2E8EE;
    background-clip: border-box;
    border: 2px solid #B2C2D1;
    border-radius: .5rem;
}
.site-grid {
    grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,13.875rem)) [main-end] minmax(0,1fr) [full-end];
    grid-gap: 0 1em;
}
.site-grid>.full-width {
    grid-column: 2/span 4;
}
.site-grid:not(.has-sidebar-left) .container-component {
    border: 2px solid #B2C2D1;
    border-radius: .5rem;
    padding: 1em;
    margin: 1em 0em 1em 0em;
    background-color: #E2E8EE;
}
.grid-child.container-nav {
    margin: 0em 1em 0em 1em;
}
.footer {
    border: 2px solid #B2C2D1;
    border-radius: .5rem;
    margin-top: 0em;
    color: #003366;
    background-image: linear-gradient(180deg,#e9edf2,#B2C2D1);
}
.navbar-toggler {
    margin-bottom: 1em;
}
.container-component img {
    border: 3px double #B2C2D1;
    margin: 7px 7px 7px 7px;
}
.container-header .metismenu>li.active>a:after, .container-header .metismenu>li.active>button:before, .container-header .metismenu>li>a:hover:after, .container-header .metismenu>li>button:hover:before {
    background: #000000;
    left: 0;
    right: 0;
}