:root{
	--fontSize: 0.8em;
	--fontStyle: Tahoma;
    --rootBG: white;
    --contentBG: white;
	--contentFG: #777777;
    --headerBG: white;
    --headerFG: #777777;
    --maxWidth: 1200px;
	--accentColor:#00aaff;
	--accentColorAlpha:white;
	--accentDarkFG: #fff;
	--accentLight: #f2f2f2;
	--accentLightAlpha: #f2f2f23d;
    --menuBG: transparent;
    --menuFG: #4d4d4d;
    --blockWarning: #FF3434;
    --blockWarningLight: #ff343417;
    --blockAdvice: #8c750e;
    --blockTip: #7CB342;
    --blockExample: #1976D2;
    --blockNote: #ff6600;
    --blockNoteLight: #ff660026;
    --blockLegal: #388E3C;
    --blockComplement: #795548;
    --blockComplementLight: #79554821;
    --blockObjectives: #00838F;
    --blockObjectivesLight: #00838F17;
    --blockAgenda: #00ACC1;
    --footerBG: white;
    --footerFG: #777777;
}

/* SCROLLER */
*::-webkit-scrollbar {
	width: 9px;
}
* {
	scrollbar-color: #00aaff #e0ecec60;
}
*::-webkit-scrollbar-track {
	background: #e0ecec60;
}
*::-webkit-scrollbar-thumb {
	background-color: #00aaff ;
	border-radius: 6px;
}

/* Skin MS */


body {
    background-color: white;
    height: calc(100% - 45px);
    margin-top: 70px;
    box-shadow: 0 0 5px #777 inset;
	font:12px Tahoma,Arial,sans-serif;
}

img.logo {
height: 65px;
position: absolute;
left: 5px;
right: 0;
top: 5px;
}

#page::before{
    content:none;
}

#page{
    height: 100%;
    position: relative;
    padding-right: 60px;
    box-sizing: border-box;
}

/* HEADER */
#header {
    position: static;
    display: flex;
    align-items: center;
    padding-bottom: 0;
    height: 60px;
    box-sizing: border-box;
}

div.searchFra {
    position: relative;
    left: 0;
}

input.searchText, input.schInput {
    border-radius: 8px;
    border-width: 1px;
}

button.showMenu {
    right: .5rem;
    bottom: 20px;
    top: auto;
    left: auto;
    border-radius: 50%;
    font-size: 1rem;
    background-color: var(--accentColorAlpha);
}

/* MENU */
#menu {
    position: static;
    flex: 0 0 auto;
    order: 3;
}
#menu li {
    padding: 0;
    height: auto;
}
#menu a {
    font-variant: small-caps;
    color: #00aaff;
    border-bottom: 8px solid #e0dcd8;
	display: block;
}
#menu a:hover {
    border-bottom: 8px solid #00aaff;
    background-color: transparent;
    color: #00aaff;
}
.tplPage #menu li.outRoot a, .tplPage.tplNoMenu #menu li.outRoot a, .tplTools #menu li.mainSel_yes a {
    color: #fd7400;
	border-bottom: 8px solid #fd7400;
}
#menu span {
    padding-top: 0;
}
#menu a:hover span {
    text-decoration: none;
}

/* MAIN */
#main {
    margin-top: 0;
    border: 8px solid #e0dcd8;
    border-radius: 20px;
    background-color: #fff;
    display: flex;
    flex-direction: row-reverse;
    overflow: hidden;
}

#main main {
    overflow: auto;
    flex: 2 1 auto;
}

.twoColumn.menuActive #main main{
    margin-left: 0;
}

#outline {
    position: relative;
    flex: 0 0 200px;
    top: 0;
    background-color: #e0ecec;
    height: 100% !important;
}

#outline li > .mnu_sel_yes {
    border-right: 0;
    color:#fff;
    background-color: transparent;
}

#outline li  .mnu_i{
    border-radius: 5px;
    padding: 1px 5px;
}

#outline li > .mnu_sel_yes .mnu_i {
    background-color: #fd7400;
}

/* FOOTER */
#footer nav {
    position: absolute;
    flex-direction: column;
    right: 0.5rem;
    bottom: 60px;
    background-color: transparent;
    margin-bottom: .5em;
    border-bottom:none;
}

#footer a.navPrev, 
#footer a.navNext {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    margin:.5em 0;
    border-radius: 50%;
    flex: 0 0 auto;
}

#footer nav a span{
    position: absolute;
    left:-9999px;
}

#footer a.navPrev::before{
    margin-right: 0;
}
#footer a.navNext::after{
    margin-left: 0;
}

/* RESPONSIVE */
@media (max-width: 1200px){
	a.btnAbout{
		right:0;
	}
}

@media (max-width: 800px){
    body{
        overflow: visible;
    }
    #page {
        padding-right: 0;
    }
    #header {
        padding-right: 60px;
    }
    button.showMenu {
        bottom: auto;
        top: 50px;
        position: fixed;
        box-shadow: 0 0 5px #ccc;
    }
    #main{
        overflow: visible;
    }
    #outline {
        position: fixed;
        left: 0;
        top: 50px !important;
        height: calc(100% - 60px) !important;
        z-index: 9999;
    }
    #footer nav {
        position: static;
        flex-direction: row;
        justify-content: space-around;
    }
}

@media (max-width: 500px){
    #header {
        flex-direction: column;
        height: auto;
        padding: 1em 60px;
    }
}