:root {
    --HeaderBG: #2378F7;
    --BackgroundBG: #ccc;
    --MenuBG: #333;
    --MenuButtonBG: #333;
    --MenuButtonBGHover: #111;
    --ActiveMenuBG: #04aa6d;

    --CollapsibleContentBG: #A1A1A1;
    --Link: #F7A223;
    --Link2: #AA7120;
}

html, body { margin: 0px; padding: 0px; font-family: Arial, sans-serif; background: var(--BackgroundBG); }
.header, .footer { width: 100%; height:50px; background-color: var(--HeaderBG); color: white; text-align: center; padding: 20px 0px; border: 1px solid #333; }
.footer { height:80px; }
.fixed-width { width: 1000px; margin: 0; margin-left: auto; margin-right: auto; }
.content-wrapper { display: flex; padding: 20px 0; display: block; }
.page { flex-grow: 1; background-color: #fff; padding: 20px; }


/**
* MENU
* */

.menu { width: 100%; background-color: var(--MenuBG); margin: 0px; }
.menu ul { position:sticky; top:0; background-color: var(--MenuBG); list-style-type:none; margin:0; padding:0; overflow:hidden; }
.menu li { float:left; border-right: 1px solid #bbb; }
.menu li:last-child { border-right: none; }
.menu li a { display:block; padding:14px 16px; background-color: var(--MenuButtonBG); text-align: center; color: white; text-decoration:none; }
.menu li a:hover { background-color: var(--MenuButtonBGHover); }
.menu li a.activeMenu { background-color: var(--ActiveMenuBG); }


/**
* LOGIN
* */

.login-box { width:200px; margin-left: auto; margin-right: auto; }
.login-box h1 { color: var(--HeaderBG); }