:root
{
    --topnav-color : white;
    --topnav-bgcolor : lightgrey;
}


#topnav
{
    z-index: 100;
    position: relative;
    background-color: lightgrey;
    background-color: var(--topnav-bgcolor);
    height:40px;
    box-shadow: 2px 2px 10px black;
    display: flex;
}


#topnav > .navuser
{
    display: flex;
    align-items: center;
}

#topnav > .navuser .dropdown
{
    position: relative;
    margin: 2px;
    top: 2px;
}


#topnav .navuser a,
#topnav .navuser a:hover,
#topnav .navuser a:visited,
nav.sidenav a,
nav.sidenav a:hover,
nav.sidenav a:visited
{
    color:inherit;
    text-decoration: none;
}

#topnav .navitem a, #topnav .navitem a:hover, #topnav .navitem a:visited{
    color:inherit;
    text-decoration: underline;
}

#topnav > .navitem
{
    flex-grow:1;
    padding: 3px;
}

.navitem > div
{
    height: 100%;
    line-height: 36px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}


.navitem > div > a
{
    height: 100%;
    display: inline-block;
}

.navitem > div > a > img
{
    height: 100%;
}

/***** SIDENAV ***/
nav.sidenav
{
    flex-shrink: 0;
    height: 100%;
    position: relative;
    width: 1px;
    left: -200px;
    top: 0;
    background-color: rgb(205,205,205);
    background-color: rgba(205,205,205, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
    scrollbar-color: #299bdb white;
    scrollbar-width: thin;


    padding-top:10px;
}

#Cmenu
{
    display:none;
}
#Cmenu:checked ~ #container > nav.sidenav
{
    width:200px;
    left:0;
}
.menu-btn
{
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height:34px;
    cursor:pointer;
    transition: all .5s ease-in-out;
}

.menu-btn-burger
{
    width:24px;
    height:5px;
    background:var(--topnav-color);
    border-radius:5px;
    box-shadow: 0 2px 5px rgba(255,101,47,.2);
    transition: all .5s ease-in-out;
}

.menu-btn-burger::before,
.menu-btn-burger::after
{
    content:'';
    position:absolute;
    width:24px;
    height:5px;
    background-color: var(--topnav-color);

    border-radius:5px;
    box-shadow: 0 2px 5px rgba(255,101,47,.2);
    transition: all .5s ease-in-out;
}

.menu-btn-burger::before
{
    transform: translateY(-8px);
}


.menu-btn-burger::after
{
    background-color: var(--topnav-color);
    transform: translateY(8px);
}

#Cmenu:checked ~ nav#topnav > .navitem  .menu-btn-burger
{
    transform: translateX(-50px);
    background: transparent;
    box-shadow: none;
}

#Cmenu:checked ~ nav#topnav > .navitem  .menu-btn-burger:before
{
    transform: rotate(45deg) translate(35px, -35px) scale(1.33,1);
}

#Cmenu:checked ~ nav#topnav > .navitem  .menu-btn-burger:after
{
    transform: rotate(-45deg) translate(35px, 35px) scale(1.33,1);
}

nav.sidenav a {
    display:flex;
}

nav.sidenav a span {
    line-height: 34px;
}


nav.sidenav ul
{
    -border : 1px solid black;
}

nav.sidenav ul > li
{
    background-color : rgba(200,200,200,0.9);
}

nav.sidenav ul > li > ul
{
    margin-left : 1em;
}

nav.sidenav ul > li > ul > li > a
{
    padding : 0.5em;
    padding-left : 1em;

    background-color: lightgray;
    text-decoration: none;
    width:100%;
    display:inline-block;

}

nav.sidenav li > label
{
    display:block;
    cursor:pointer;
}

nav.sidenav > ul
{
    position:relative;
}


nav.sidenav ul > li > label
{
    width:100%;
    padding : 0.5em;
    padding-right:50px;
    height:2.5em;
    text:2em;
    display:inline-block;
    vertical-align: middle;
}

nav.sidenav ul > li > label::after
{
    content:"";
    position: absolute;
    width:1.5em;
    height:1.5em;
    background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV/TlopUHOwgIpKhOrUgKuIoVSyChdJWaNXB5NIvaGJIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0DhGaNqWZgHFA1y8gkE2K+sCKGXhHECEIIICYxU09lF3LwHF/38PH1Ls6zvM/9OfqUoskAn0g8y3TDIl4nnt60dM77xBFWkRTic+KYQRckfuS67PIb57LDAs+MGLnMHHGEWCx3sdzFrGKoxFPEUUXVKF/Iu6xw3uKs1uqsfU/+wnBRW85yneYwklhECmmIkFFHFTVYiNOqkWIiQ/sJD/+Q40+TSyZXFYwc89iACsnxg//B727N0uSEmxROAMEX2/4YBUK7QKth29/Htt06AfzPwJXW8W80gZlP0hsdLXoE9G8DF9cdTd4DLneAwSddMiRH8tMUSiXg/Yy+qQAM3AK9q25v7X2cPgA56mrpBjg4BMbKlL3m8e6e7t7+PdPu7wdrInKkU2fHHAAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+QFHgc0AmlM2LYAAAFpSURBVFjD7dg7a4NQGAbg9zuKZEgkQ3BJbDNk0DYd0kDoIII/IHv+njEXe1kLnfpfCl3bqTTdvi4VRBoSczl+gy+8iyA8HD0XDlCnjsA0Go0+gCWATwAfABZEdC0CN51ORwC+AHCxSqmk0+lcFd9hZoOZSZcx/Q+Xr+u6q2az6f3hSPcgbnYBc00A+LqBXLZElADwxAJz0NgwDE8sMP/piciTDMw6V0r5koEMgG3bXgRBcCMWmLXb7S5PMZlYQxMi8iUDs8aHjChX0DmAS8lABvC2L5IrbFzE0BZgVXkH4OYfKOlnU2nAV+mT5EIqcLUvTivQcZzHVqs1FLdQj8fj5yiKbsVtdZPJ5GU2m92JOyy02+2HMAxHEo9ba9M0h6dei04BSwEMz7VYHjVi54QdA0x1wLL8SBux0lcflmXdE5F2WJb+tssjAGvLsiqDFZELx3G+e73eZjAYPB2yJZX++Su4iKpTZ1d+AWCVO0LkVixqAAAAAElFTkSuQmCC);
    background-size: 1.5em;
    background-position: right;
    right:0;

    transition: 0.25s;
}

nav.sidenav  ul > li > ul
{
    display:none;
    opacity:0;
    position:relative;
    transition: 2s;
    height:0;
}

nav.sidenav ul > li > ul > li
{
    display:none;

    transition: 2s;
}

nav.sidenav ul > li > input
{
    display:none;
}

nav.sidenav ul > li > input:checked ~ ul
{
    display:block;
    opacity:1;
    height:auto;
    padding-bottom:0.5em;
}

nav.sidenav ul > li > input:checked ~ ul > li
{
    display:block;

}

nav.sidenav ul > li > input:checked ~ label::after
{
    transform: rotate(90deg);

}


nav.sidenav a:hover, nav.sidenav label:hover
{
    background-color: gray;
}



@media screen and (max-width: 650px)
{
    #Cmenu ~ nav.sidenav
    {
        position:absolute;
        top:40px;
        z-index:10;
        background-color: rgba(205,205,205, 1)
    }

    #Cmenu:checked ~ #container > nav.sidenav
    {
        width:100%!important;
        flex-grow:1;

    }
}






/****** OTHERS ******/

h1 {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}

h2 {
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
}

.actionsPage
{
    padding:0px 0px 30px 0;
    text-align:right;
}



.container
{

    overflow:hidden;
}


#content
{
    overflow:auto;
    padding:20px 0;
}

#inside
{
    border-radius: 10px;
    background-color: rgba(255,255,255,0.2);
    box-shadow: 2px 2px 10px black;
    padding:20px;


    background-color: rgba(255,255,255,0.2);
    min-height:50%;
    min-width:100%;
    width:min-content;
    margin:auto;

    min-width: calc(100% - 100px);
}

#content div#inside {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px black;
    background-color: rgba(240, 240, 240, 0.95);
    smin-width: min-content;
}


div#changeYear
{
    display:flex;
    justify-content: center;
    padding:5px;
}

div#changeYear > span#prev,div#changeYear > span#suiv
{
    flex-grow:0;
    flex-basis:50px;
}
div#changeYear > span#prev > a > img,div#changeYear > span#suiv > a > img
{
    height:25px;
}

div#changeYear > span#middle
{
    flex-grow:1;
    text-align:center;
    line-height:28px;
}
@media screen and (max-width: 650px)
{
    #inside
    {
        width: calc(100% - 10px);
        padding:10px;
    }
}

@media print
{
    body{
        height:auto;
    }
    .topnav, .sidenav
    {
        display:none;
    }
}


.checkbox-items{
    display:none;
}


.listetab
{
    display:table;
    margin: 10px auto 0 auto;
}

.listetab > *
{
    display:table-row;
}
.listetab > * > span
{
    display:table-cell;
    padding : 2px 10px;
}

.listetab > a
{
    color:black;
    text-decoration: none;
}

.listetab > div.title
{
    background-color: #25cff2;
}

.listetab > a:hover
{
    background-color: #565c64;
    color:white;
}