@charset "utf-8";

:root {

    --nav-bg: #FFF;

    --sidebar-width: 280px;
    --sidebar-width-drop: 65px;
    --sidebar2-width: 280px; /*260px*/
    --sidebar2-width-drop: 0px;/*65px; /*55px*/ /*mettre a 0 s'il y a un double Sidebar*/

    --sidebar-bg: #FFF;
    --sidebar-text-color: 0, 0, 0;
    --sidebar-text-color2: 255, 255, 255;
    --sidebar-color: var(--primary-color-rgb);
    --sidebar-color2: var(--primary-color-rgb);

    --sidebar2-bg: #FFF;
    --sidebar2-text-color: 0, 0, 0;
    --sidebar2-text-color2: 255, 255, 255;
    --sidebar2-color: var(--primary-color-rgb);
    --sidebar2-color2: var(--primary-color-rgb);

    --sidebar-tips-color: 255, 255, 255;
    --sidebar-tips-bg: var(--primary-color-rgb);

}

/**/
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track {
	box-shadow: none;
	background: transparent;
	border-radius: 0 0 10px 10px;
}
.sidebar::-webkit-scrollbar-thumb {
	background: rgb(var(--sidebar-color), 0.3); 
	border-radius: 0 0 10px 10px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
	background: rgb(var(--sidebar-color), 0.4); 
}

/**/
.sidebar2::-webkit-scrollbar { width: 3px; }
.sidebar2::-webkit-scrollbar-track {
	box-shadow: none;
	background: transparent;
	border-radius: 0 0 10px 10px;
}
.sidebar2::-webkit-scrollbar-thumb {
	background: rgb(var(--sidebar2-color), 0.3); 
	border-radius: 0 0 10px 10px;
}
.sidebar2::-webkit-scrollbar-thumb:hover {
	background: rgb(var(--sidebar2-color), 0.4); 
}



/* ------------------------UI---------------------------------- */
/***** Navigation *****/
.app-nav.navigation {
	width: 100%; /*height: var(--nav-height); position: fixed; z-index:101; 
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
	color: #555; transition: 0.2s ease;*/
}
.navigation-wrapper { padding-left: calc(var(--sidebar-width) + var(--sidebar2-width-drop) + 0px); transition: 0.2s ease; }
.navigation.close .navigation-wrapper{ padding-left: calc(var(--sidebar-width-drop) + var(--sidebar2-width-drop) + 0px);  }


/*
.app-nav.navigation-wrapper{ width: 100%; margin: auto; position: relative; }

.app-nav.navigation-wrapper{ width: 100%; margin: auto; position: relative;}

.app-nav.navigation-top {
    width: 100%; height: var(--nav-height-top);
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s ease all;
}

.app-nav.navigation-main {
    width: 100%; height: var(--nav-height-main);
    display: flex; align-items: center; justify-content: center;
}

.app-nav.navigation-bottom {
    width: 100%; height: var(--nav-height-bottom);
    display: flex; align-items: center; justify-content: center;
}

.app-nav.navigation-split-left { width: 20%; float: left; }
.app-nav.navigation-split-center { width: 60%; float: left; }
.app-nav.navigation-split-right { width: 20%; float: left; }
*/

/*
.app-nav .nav ul { 
    display: flex; align-items: center; justify-content: center;
	list-style-type: none; margin: 0; padding: 0;
}
.app-nav .nav li a {
    position: relative; display: flex; align-items: center;
    padding: 20px 14px; margin: 0 0;
	font-size: 1rem; line-height: 1rem; 
    color: #000; font-weight: 800; 
}
*/


/***** Sidebar *****/
.logo { width: 100%; }
.logo-set { width: 100%; position: relative; padding: 0 50px;  }

.user-set {
    width: 100%; padding: 0px 1.4rem 2.7rem 1.4rem; /*padding: 0px 20px 20px 20px*/ margin-bottom: 1.4rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    /*background-color: rgb(var(--sidebar-color), 0.1);*/
    background: linear-gradient(0deg, rgb(var(--sidebar-color), 0.1) 0%, rgb(var(--sidebar-color), 0) 100%);
    /*border-radius: 0 0 80px 80px;*/
}
.sidebar.close .user-set { padding: 0 0 0 0; }
.sidebar.close .user-info { height: 2rem; opacity: 0; }

.user-img-set { width: 50%; border-radius: 180px; position: relative; }
.user-img { width: 100%; border-radius: 180px; box-shadow: 0px 1px 30px rgba(0, 0, 0, 0.2); }

.user-info { 
    width: 100%; padding: 5px 20px 0 20px; 
    font-size: 0.8rem; text-align: center;
    color: rgb(var(--sidebar-text-color), 0.6); transition: 0.2s ease;
}
.user-info span { font-size: 0.95rem; font-weight: 600; color: rgb(var(--sidebar-text-color), 0.9); }

.user-action { 
    display: flex; align-items: center; justify-content: center; text-align: center;
    margin: -42px 0 20px 0; /*0px*/
}
.sidebar.close .user-action { flex-direction: column; }
.sidebar.close .user-action li { margin-bottom: 5px; }



/*Sous Module*/
.sidebar {
	width: var(--sidebar-width); height: 100vh; 
	position: fixed; z-index: 1000; overflow-y: scroll; overflow-x: hidden;
	top: 0; left: var(--sidebar2-width-drop);
	padding: 0 0;
    background-color: var(--sidebar-bg);
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
    transition: 0.26s ease;
}
.sidebar.close {
	width: var(--sidebar-width-drop); overflow-y: unset; overflow-x: unset;
}

.sidebar-icon {
    width: 40px; height: 40px; float: left; position: relative; z-index: 103; margin: 5px 0 0 20px; padding: 7px 7px; cursor: pointer; 
}
.sidebar-icon:hover { background-color: rgb(var(--sidebar-color), 0.1); border-radius: 30px; }
.sidebar.open .sidebar-icon { margin-top: 10px; position: absolute; right: 0%; }

.sidebar-action { width: calc(100% - 70px); float: left; position: relative; display: flex; justify-content: right; margin-top: 7px; }
.sidebar.close .sidebar-action { opacity: 0; visibility: hidden;  }

.sidebar-menu { 
    width: 100%; display: flex; align-items: center; /*margin: 10px 0;*/ padding: 10px 15px;  position: relative;
    border-radius: 18px;
    text-decoration: none;
    cursor: pointer;
}
.sidebar-menu-animate { margin: 5px 0; }
.active.sidebar-menu-animate {
    margin: 5px 0;
    background: repeating-conic-gradient(from var(--a), rgb(var(--sidebar-color), 0.3) 0%, rgb(var(--effect-color2-rgb), 0.3) 5%, transparent 5%, transparent 40%, rgb(var(--sidebar-color), 0.3) 50%); 
    animation: animate 5s linear infinite;
    padding: 3px;
    border-radius: 26px;
    transition: 0.1s ease;
}
.sidebar.close .active.sidebar-menu-animate,
.sidebar.close .sidebar-menu-animate { padding: 5px 5px; }

.sidebar-menu:hover, .sidebar-menu.active { 
    /*background: linear-gradient(90deg, rgb(var(--sidebar-color), 0.1) 0%, rgb(var(--sidebar-color), 0) 100%);*/
    background-color: rgb(var(--sidebar-color), 1); box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
}
.sidebar-menu:hover span, .sidebar-menu.active span {
    color: rgb(var(--sidebar-text-color2), 1);
}
.sidebar-menu:hover .sidebar-menu-icon, .sidebar-menu.active .sidebar-menu-icon {
    filter: brightness(100); opacity: 1;
}

.sidebar-menu-set { margin: 0.7rem 1rem; list-style-type: none; }
.sidebar-menu-icon { width: var(--size-medium); margin: 0 10px 0 0; /*filter: brightness(0); opacity: 0.3;*/ }
.sidebar-menu span { font-size: 0.9rem; line-height: 1rem; font-weight: 700; color: rgb(var(--sidebar-text-color), 0.7); }
.sidebar.close .sidebar-menu-icon { margin-left: 0; }

.sidebar.close .sidebar-menu-set { margin: 10px 2px 10px 5px; }
.sidebar.close .sidebar-menu-icon { margin: 0 0; }
/*.sidebar.close .active .sidebar-menu-icon { transform: scale(1.1); margin: 0 0;  }*/
.sidebar.close .sidebar-menu span { display: none; }
.sidebar.close .my-badge { transform: scale(0.8) translateX(0px) translateY(6px); }

.sidebar.close .sidebar-menu:hover span { 
    width: calc(var(--sidebar-width-drop) * 3); display: block; position: absolute; 
    margin-left: calc(var(--sidebar-width-drop) - (var(--sidebar-width-drop)/4)); padding: 8px 20px;
    background-color: rgb(var(--sidebar-tips-bg),1); border-radius: 12px;
    font-size: 0.8rem; color: rgb(var(--sidebar-tips-color),1);
}

.sidebar-submenu { display: none; list-style-type: none; margin: 0 0 15px 0; }
.sidebar-submenu.active { display: block; }
.sidebar-submenu-item { 
    padding: 7px 25px; margin: 1px 0; position: relative;
    border-radius: 12px;
    font-size: 0.9rem; line-height: 1rem; font-weight: 600; color: rgb(var(--sidebar-text-color), 0.6);
}
.sidebar-submenu-item:hover, .sidebar-submenu-item.active { 
    background: linear-gradient(90deg, rgb(var(--sidebar-color), 0.1) 0%, rgb(var(--sidebar-color), 0) 100%);
    color: rgb(var(--sidebar-color), 1);
}
.sidebar.close .sidebar-submenu { display: none; }


/*Module*/
.sidebar2 {
	width: var(--sidebar2-width-drop); height: 100vh;
	position: fixed; z-index: 1001; overflow-y: scroll; overflow-x: hidden;
	top: 0; left: 0;
    background-color: var(--sidebar2-bg);
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
}
.sidebar2.open { width: var(--sidebar2-width); overflow-y: scroll; overflow-x: hidden; }
.sidebar2.open ~ .app-section { filter: blur(1px); opacity: 0.5; }
.sidebar2.open ~ .sidebar { left: var(--sidebar2-width); }


.sidebar2-icon {
    width: 40px; height: 40px; position: relative; z-index: 103; margin: 5px auto 0 auto; padding: 7px 7px; cursor: pointer; 
}
.sidebar2-icon:hover { background-color: rgb(var(--sidebar2-color), 0.1); border-radius: 30px; }
.sidebar2.open .sidebar2-icon { margin: 5px 0 0 0; left: calc(100% - 26px); }



.sidebar2-menu { 
    display: flex; align-items: center; padding: 9px 10px;  margin: 10px 5px; position: relative;
    font-weight: 600;
    border-radius: 16px;
}

.sidebar2-menu.active { 
    background-color: rgb(var(--sidebar2-color), 1); box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
}
.sidebar2-menu:hover, .sidebar2-menu.active.animate { 
    background: linear-gradient(90deg, rgb(var(--sidebar2-color), 1) , rgb(var(--sidebar2-color), 0.85), rgb(var(--sidebar2-color), 1) );
	background-size: 400% 400%; 
    -webkit-animation: AnimationName 3s ease infinite;
    -moz-animation: AnimationName 3s ease infinite;
    animation: AnimationName 3s ease infinite;
}
.sidebar2-menu:hover .sidebar2-menu-icon, .sidebar2-menu.active .sidebar2-menu-icon { filter: brightness(100); opacity: 1; }
.sidebar2-menu.show { 
    background-color: rgb(var(--secondary-color-rgb), 1); box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
}


.sidebar2-menu-set { margin: 0 5px; }
.sidebar2-menu-icon { width: var(--size-medium); margin: auto; /*filter: brightness(0); opacity: 0.3;*/ }
.sidebar2-menu span { display: none; position: relative; font-size: 0.9rem; line-height: 1rem; font-weight: 700; color: rgb(var(--sidebar2-text-color), 0.6); }
.sidebar2-menu:hover span, .sidebar2-menu.active span {
    color: rgb(var(--sidebar2-text-color2), 1);
}

.sidebar2.close .sidebar2-menu:hover span { 
    width: calc(var(--sidebar2-width-drop) * 3); display: block; position: absolute; 
    margin-left: calc(var(--sidebar2-width-drop) - (var(--sidebar2-width-drop)/4)); padding: 8px 20px;
    background-color: rgb(var(--sidebar-tips-bg),1); border-radius: 12px;
    font-size: 0.8rem; color: rgb(var(--sidebar-tips-color),1);
}

.sidebar2.open .sidebar2-menu-set { margin: 0 15px; }
.sidebar2.open .sidebar2-menu-icon { display: block; margin: 0 10px 0 5px; }
.sidebar2.open .sidebar2-menu span { display: block;  }



.my-badge {
	min-width: 1rem; height: 1rem; display: flex; align-items: center; justify-content: center;
	position: absolute; top: 1rem; margin-right: 8px;  
	border-radius: 50px;
	font-size: 0.5rem; font-weight: bold; color: var(--color-white);
}
.my-badge.dot { min-width: 0.4rem; height: 0.4rem; }
.my-badge.tr { top: -5px; right: 0%; }
.my-badge.tl { top: 6px; left: 9px; }
.my-badge.br { bottom: 0%; margin-bottom: -5px; right: 0%; }
.my-badge.br2 { margin-top: 5px; right: 0%; }
.my-badge.br3 { margin-top: -1px; right: 0%; }



/***** Page Section *****/
.app { width: 100%; min-height: 100vh; float: left; background-color: var(--app-bg-color); }

.app-section {
	width: calc(100% - var(--sidebar-width) - var(--sidebar2-width-drop)); position: relative;
    left: calc(var(--sidebar-width) + var(--sidebar2-width-drop));
    transition: all 0.3s ease; 

    /* a utiliser s'il n'y a pas une double Sidebar
    width: calc(100% - var(--sidebar-width));
    left: var(--sidebar-width);
    */
}

.sidebar.close ~.app-section {
    width: calc(100% - var(--sidebar-width-drop) - var(--sidebar2-width-drop));
    left: calc(var(--sidebar-width-drop) + var(--sidebar2-width-drop)); 

    /* a utiliser s'il n'y a pas une double Sidebar
    width: calc(100% - var(--sidebar-width-drop));
    left: var(--sidebar-width-drop);*/
}




/***** Bar *****/
.bar1, .bar2, .bar3 { background-color: var(--primary-color); margin: 4px 0; transition: 0.3s; border-radius: 2px; }

.bar1 { width: 26px; height: 3px; -webkit-transform: rotate(0deg) translate(0px, 0px); transform: rotate(0deg) translate(0px, 0px); }
.bar2 { width: 20px; height: 3px; opacity: 1;}
.bar3 { width: 26px; height: 3px; -webkit-transform: rotate(0deg) translate(0px, 0px); transform: rotate(0deg) translate(0px, 0px); }

.open .bar1 { width: 22px; -webkit-transform: rotate(-45deg) translate(-4px, 2px); transform: rotate(-45deg) translate(-4px, 4px); }
.open .bar2 {opacity: 0;}
.open .bar3 { width: 22px; -webkit-transform: rotate(45deg) translate(-6px, -5px); transform: rotate(45deg) translate(-6px, -6px); }


.barr1, .barr2, .barr3 { background-color: var(--secondary-color); margin: 4px 0; transition: 0.3s; border-radius: 2px; }

.barr1 { width: 26px; height: 3px; -webkit-transform: rotate(0deg) translate(0px, 0px); transform: rotate(0deg) translate(0px, 0px); }
.barr2 { width: 22px; height: 3px; opacity: 1;}
.barr3 { width: 18px; height: 3px; -webkit-transform: rotate(0deg) translate(0px, 0px); transform: rotate(0deg) translate(0px, 0px); /*background-color: #afe66f;*/ }

.close .barr1 { width: 15px; height: 3px; -webkit-transform: rotate(-45deg) translate(-1px, 5px); transform: rotate(45deg) translate(10px,-6px); }
.close .barr2 { width: 29px; height: 3px; transform:translate(-6px, 0); opacity: 1; }
.close .barr3 { width: 15px; height: 3px; -webkit-transform: rotate(45deg) translate(0px, -5px); transform: rotate(-45deg) translate(8px, 6px); }






/* ---------------------------------------------------------- */
/*Responsive*/
@media screen and (max-width: 600px){

    :root {
        --sidebar-width: 180px;
        --sidebar-width-drop: 45px;
        --sidebar2-width: 180px; 
        --sidebar2-width-drop: 0px;/*45px; */
    }  
    .sidebar.close .sidebar-menu-set { margin: 10px 1.5px 10px 1.5px; }
    .sidebar2-menu-set { margin: 1px; }

}

@media screen and (min-width: 600px){

    :root {
        --sidebar-width: 180px;
        --sidebar-width-drop: 45px;
        --sidebar2-width: 180px; 
        --sidebar2-width-drop: 0px;/*45px; */
    }  
    .sidebar.close .sidebar-menu-set { margin: 10px 1.5px 10px 1.5px; }
    .sidebar2-menu-set { margin: 1px; }
    
}

@media screen and (min-width: 992px){


}

@media screen and (min-width: 1200px){

    :root {
        --sidebar-width: 210px;
        --sidebar-width-drop: 50px;
        --sidebar2-width: 210px; 
        --sidebar2-width-drop: 0px;/*50px; */
    } 
    .sidebar.close .sidebar-menu-set { margin: 10px 2px 10px 5px; }
    .sidebar2-menu-set { margin: 2.5px; }

}

/*@media screen and (min-width: 1300px){

}

@media screen and (min-width: 1500px){

}*/

@media screen and (min-width: 1600px){

    :root {
        --sidebar-width: 260px;
        --sidebar-width-drop: 58px;
        --sidebar2-width: 260px; 
        --sidebar2-width-drop: 0px;/*58px; */ 
    }  

    .sidebar2-menu-set { margin: 0 5px; }

}

@media screen and (min-width: 1800px){

    /*:root {
        --sidebar-width: 230px;
        --sidebar-width-drop: 58px;
        --sidebar2-width: 230px; 
        --sidebar2-width-drop: 58px; 
    }  

    .sidebar2-menu-set { margin: 0 5px; }*/
}

@media screen and (min-width: 2300px){

    :root {
        --sidebar-width: 300px;
        --sidebar-width-drop: 65px;
        --sidebar2-width: 300px; 
        --sidebar2-width-drop: 0px;/*65px; */; 
    }   

}

@media screen and (min-width: 3200px){

    :root {
        --sidebar-width: 320px;
        --sidebar-width-drop: 65px;
        --sidebar2-width: 320px; 
        --sidebar2-width-drop: 0px;/*65px; */; 
    }   

}