/* 
	ecoSMRT 
	===
	navigation.css
*/
.navbar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.navbar-nav .nav-link {
    padding:0; 
    /*color: #fff; */   
	transition: 0.4s;	
	font-weight: 700; 
}
/* .navbar-nav .help-link { */
	/* text-transform: uppercase;     */
/* } */

.topbar .nav-link {
	font-weight: 400; 
	font-size: 14px;
} 

.sidebar-intro{
    position: relative; 
}

.sidebar-toggle{
    position:absolute;
    top: 31px;
    right: -40px; 
    height: 40px; 
    width: 40px; 
    line-height: 40px; 
    background:#fff;
    z-index: 1000;
    border-radius: 0 8px 8px 0;
    transition: 0.3s;
}
.sidebar-toggle:hover{
    cursor:pointer;
}
.sidebar-toggle:hover svg path{
    fill: var(--navy-blue);
}
.sidebar-toggle span{
    display: inline-block;
    transform: rotate(-90deg);
    width: 90%;
    text-align:center; 
}
.sidebar-toggle svg path{
    fill:var(--mid-green);
}
.sidebar-hidden .sidebar-toggle span{
    display: inline-block;
    transform: rotate(90deg);
}

.sidebar-overlay .navbar-nav{
	margin-top: 95px; 
}
.sidebar-overlay h2{
    display: none;
}
.template-12 .sidebar-overlay .navbar-nav{
	margin-top: 95px; 
}
.sidebar-overlay ul{
    margin:0; padding: 0;
    list-style: none; 
}
.sidebar-overlay .navbar-nav li a{
    display: block;
	padding: 8px 15px 8px 25px;	
	transition: 0.4s; 
	color:#fff;
}
.sidebar-overlay li{
    font-size: 20px; 
}
.sidebar-overlay .accordion li{
    font-size: 18px; 
}
.sidebar-overlay .accordion .lesson-sub li{
    font-size: 15px; 
}
.sidebar-overlay .navbar-nav .lesson-sub li a{
    padding-left: 45px; 
}
/*
.sidebar-overlay .navbar-nav li span{
	transition: 0.2s;
	transform:translateX(0);
}
.sidebar-overlay .navbar-nav li span{
	transition: 0.5s;

	display: block; 
}
.sidebar-overlay.is-active .navbar-nav li span {
	transform:translateX(0);
	opacity: 1; 
}
*/
.sidebar-overlay .navbar-nav li.acc-heading span{
    position: absolute;
    right: 15px;
    top: 3px;
    transition: 0.2s;
}
 .navbar-nav li.acc-heading span{
     transform:rotate(180deg);
 }
.navbar-nav li.acc-heading.open span{
    transform:rotate(0deg);
}

.sidebar-overlay .navbar-nav li.acc-heading svg path{
    fill:#fff;
}
.sidebar-overlay li{
    padding: 0;
}
.sidebar-overlay .accordion{
    margin: 0;
}
/*
.sidebar-overlay .navbar-nav li:nth-child(1) span {
	transition-delay: 0.3s;	
}
.sidebar-overlay .navbar-nav li:nth-child(2) span {
	transition-delay: 0.4s;	
}
.sidebar-overlay .navbar-nav li:nth-child(3) span {
	transition-delay: 0.5s;	
}
.sidebar-overlay .navbar-nav li:nth-child(4) span {
	transition-delay: 0.6s;	
}
.sidebar-overlay .navbar-nav li:nth-child(5) span {
	transition-delay: 0.7s;	
}
.sidebar-overlay .navbar-nav li:nth-child(6) span {
	transition-delay: 0.8s;	
}
.sidebar-overlay .navbar-nav li:nth-child(7) span {
	transition-delay: 0.9s;	
}
*/
.sidebar-overlay .navbar-nav li.active a, 
.sidebar-overlay .navbar-nav li a:hover{
	color:#fff;
}
.sidebar-dashboard-nav .navbar-nav{
	margin-top: 45px; 
	border-top: 1px solid #fff;	
}

.sidebar-dashboard-nav .navbar-nav li {
	font-size: 14px;
}
.sidebar-dashboard-nav .navbar-nav li a{
	padding: 15px 0 15px 100px;
	border-bottom: 1px solid #fff;
	transition: 0.4s; 
}

.sidebar-overlay .navbar-nav li.acc-heading a{
    padding-right: 50px; 
}

.sidebar-dashboard-nav .navbar-nav li.active a, 
.sidebar-dashboard-nav .navbar-nav li a:hover{
	background:rgba(255, 255, 255, 0.4);
	color:var(--dark-grey);
}

.sidebar-footer{
	position: absolute; 
	bottom: 50px; 
	left: 0; 
	width: 100%; 
}
.sidebar-hidden .sidebar .scroller{opacity: 0; }
.sidebar-hidden .sidebar{
    /* width of sidebar when closed */
    width: 0; 
}

.footer-nav{
	padding: 0;
	margin: 0 0 5px; 
}
.footer-nav li{
	list-style: none; 
	padding: 0;
	margin: 0; 
	display: inline-block;
	color:var(--light-grey);
}
.footer-nav li a{
	padding: 0 8px 0 8px;
	font-size: 14px;
	line-height: 1;	
	display: inline-block;
	transition: 0.4s; 
	color:var(--light-grey);
	font-weight: 600; 
	text-decoration: none;	
	border-left: 1px solid #aaa;
}
.footer-nav li:first-child a{
	padding-left: 0; 
	border-left:none;
}
.footer-nav li a:hover{
	color:var(--navy-blue);
}


.sidebar-footer ul{
	padding: 0;
	margin: 0; 
}
.sidebar-footer ul li{
	list-style: none; 
	padding: 0;
	margin: 0; 
}
.sidebar-footer ul li a{
	padding: 5px 15px 5px 70px;
	font-size: 16px; 
	display: block; 
	transition: 0.4s; 
	transition-delay: 1s; 
	color:#fff;
	font-weight: 700; 
	text-decoration: none;
	opacity:0;
}
.sidebar-footer ul li a:hover, 
.sidebar-footer ul li.active a{
	color:var(--yellow);
	text-decoration: none;
}
.sidebar-overlay.is-active .sidebar-footer ul li a{
	opacity:1;
}

.topbar .navbar-nav .nav-link {
    color: var(--navy-blue);
}
.inbox-link{
	background:var(--pale-grey);
	border-radius: 20px; 
	width: 30px;
    height: 30px;
    line-height: 30px;
	padding:0!important;
    text-align: center;
}
.dropdown-toggle .initials{
	background:var(--pale-grey);
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0080c9+0,0c499c+100 */
background: #0080c9; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #0080c9 0%, #0c499c 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #0080c9 0%,#0c499c 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #0080c9 0%,#0c499c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0080c9', endColorstr='#0c499c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	border-radius: 20px;     
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color:#fff;
}
.profile-toggle-name{
    height: 30px;
    line-height: 30px;
    /* padding-left: 18px;  */
}

.dropdown-toggle .chevron{
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.05em;
    display: inline-block;
    transition: 0.2s;
    transform:rotate(180deg);
    position: relative; 
    top: 2px;
}
.show .dropdown-toggle .chevron{
    transform:rotate(0deg);
}
.dropdown-toggle::after {
	display: none;

}
.dropdown-item {
    padding: 0.25rem 0.75rem;
    color: var(--light-grey);
    font-size: 14px;
}
a.dropdown-item i {
    width: 23px;
    display: inline-block;
}

.help-link .nav-link{
	display: none; 
	height: 30px; 
	line-height:30px; 
	padding: 0 10px; 
	/* font-weight: 700; */
}
.topbar .nav-link:hover{
	text-decoration: none; 
	color:var(--mid-green);	
}


/* Reserved height */
.main-content-navigation{	
	margin-bottom: 25px; 
	position: relative; 
}


.main-content-navigation ul{
	width: 100%; 
	padding: 0; 
	margin: 0; 
	border-bottom: 2px solid var(--pale-grey);
	position:relative; 
	top:-2px; 
	/* float:left; */
}
.main-content-navigation li{
	display: inline-block; 
	position:relative;	
	/* float:left; */
}
.main-content-navigation li a{
	display: inline-block; 	
	color:var(--navy-blue);	
	transition: 0.4s; 
	text-transform: uppercase;
	font-size: 13px; 
	padding: 0 12px;
	font-weight: 700; 
	border-bottom: 2px solid transparent;
}
.main-content-navigation li a span{
	padding: 5px 3px;	
	margin: 0 10px; 	
}
.main-content-navigation li.active a{
	border-color:var(--navy-blue);
}
.main-content-navigation li a:hover{
	text-decoration: none; 
	border-color:var(--navy-blue);
}


/* .main-content-navigation li:first-child a{ */
	/*padding-left: 0; 
	padding-right: 10px; 
	*/
/* } */

.main-content-navigation li:first-child a span{	
	margin-left: 0; 
	padding-left: 0; 
}
.nav-tabs li a{
     
    border: none;
    border-bottom: 2px solid var(--pale-grey);
    padding-top: 10px;
    padding-bottom: 5px;
    position: relative;
    top: 2px;
    border-radius: 8px 8px 0 0;

}


/* Tabs */
.nav-tabs .nav-link{
	border:none; 
	border-bottom: 2px solid var(--pale-grey); 
	padding-top: 10px; 
	padding-bottom: 5px; 
	position:relative; 
	top:2px; 
	border-radius: 8px 8px 0 0; 
}
.nav-tabs .nav-link.active{
	border-color:transparent; 
	border-bottom: 2px solid var(--navy-blue); 
}

.section-heading{
	color:var(--navy-blue);
}

.section-nav a{
	display:block;
	color:var(--light-grey); 
	text-decoration: none; 
	transition: 0.4s; 
}
.section-nav ul a{
 
	position: relative; 
}
.section-nav ul{
	list-style: none;
	padding: 0;
	margin:0;
}
.section-nav ul ul{
	margin: 0 0 12px;
}
.section-nav li{
	list-style: none;
	margin: 0 0 0;
	padding: 0 65px 0 15px;
	font-size: 13px; 
	position: relative;	
}
.section-nav li ul li{
    padding: 0 65px 0 0;
}
.section-nav li ul li a{
    padding: 6px 25px 6px 30px;
}
.section-nav li.section-heading{
    font-size: 18px;
    position:relative;
    border-top: 1px solid #DAE4EB;
}
.section-nav .acc-content li.section-heading {
     font-size: 16px; 
}

.section-nav li.section-heading span{
    position:absolute;
    right: 10px;
    top: 6px;
}
.section-nav li.section-heading>a{
    padding: 12px 0; 
}
.section-nav li.acc-heading span{
    top: 11px;
    right: 25px; 
    transition: 0.1s; 
}
.section-nav li.acc-heading>a{
    width: 90%;
}
.section-nav ul .l3 a{
	padding-left:45px;
	margin-left: 30px; 
}
.section-nav .num {
    position: absolute;
    left: 0;
}

.duration {
    position: absolute;
    right: 0;
    top: 2px;
	opacity: 0.8;
	/*border-left: 1px solid #fff; */
	width: 65px; 
	padding-left: 3px; 
	transition: 0.4s; 
	display: inline-block;
	text-align:right; 
	line-height: 14px; 
	white-space: nowrap;
}
.section-nav li:hover>.duration, 
.section-nav li.active>.duration{
	color:var(--navy-blue);
}

.section-nav a:hover, 
.section-nav li.active>a{
	/* color:var(--navy-blue); */
	/* color: red; */
	color: green;
	text-decoration: none; 
	font-size: 18px;
	/* font-size: 20px; */

}

.section-nav li.active>a{
	font-weight:600;
}
.section-siblings{
	padding-top: 40px; 
}
.section-siblings a{
	margin-top: 15px; 
	display: block; 
	position: relative;	
	font-size:18px;	
	
}
.section-siblings span{
	position: absolute; 
	top: -2px; 	
}
.previous-section{		
	padding-left: 40px; 	
	text-align:left; 	
}
.previous-section span{
	left: 0; 
}
.next-section span{
	right: 0; 
}
.next-section{		
	padding-right: 45px; 	
	text-align:right; 	
}

.section-siblings a i{	
	width: 30px; 
	height: 30px; 
	line-height: 30px; 
	display: inline-block;
	text-align:center;
	border-radius: 20px; 
	border:1px solid #fff;
	transition: 0.1s; 
}
.section-nav a:hover i {
	border-color:var(--yellow);
}

.sibling-nav {
    position: fixed;
    background: #fff;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.sibling-nav .row {
    padding-top: 12px;
    padding-bottom: 12px;
}
.sibling-nav a {
    text-transform: uppercase;
    color:var(--light-grey);
    font-size: 12px; 
}
.sibling-nav a:hover{
    color:var(--mid-green);
    text-decoration: none; 
}
.sibling-nav a span{
    transition: 0.3s; 
    transform:translateX(0);
    display: inline-block;
    width: 20px; 
    position: relative; 
    top: -1px;
}
.previous-link:hover span {
    transform:translateX(-3px);
}
.next-link:hover span{
    transform:translateX(4px);
}
.next-lesson-link{
    transition: 0.4s;
    padding: 5px; 
    padding-right: 15px; 
    background: #fff;
    color:var(--light-grey);
    font-size:14px;
    text-transform: uppercase;
}
.next-lesson-link:hover{
    text-decoration: none; 
    color:var(--mid-green);
}
/* .next-lesson-link i{ */
    /*
    border: 1px solid var(--dark-grey);
    width: 26px;
    height: 26px;
    display: inline-block;
    text-align: center;
    line-height: 26px;
    border-radius: 40px;
    */
/* } */

.next-lesson-link.visible{
    opacity: 1; 
}
.next-lesson-link span {
    width: 20px;
    display: inline-block;
}
    
/* *********** */
/* hamburger */
.hamburger {
  padding: 15px 0 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 15px 0 0 ;
  overflow: visible; 
  background:none;
  border:none;
  position: absolute; 
  left: 0; 
  top: 0; 
  z-index: 2000; 
}
.sidebar-overlay-open .hamburger {
	position: fixed; 
}
.hamburger:hover {
	opacity: 0.7; }
.hamburger:focus,  .hamburger:active{
	outline: none; }
.hamburger.is-active{color:#fff;}
.hamburger-box {
  width: 34px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: 30px;
	height: 3px;
	background-color: var(--navy-blue);
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease; }
.is-active .hamburger-inner, .is-active .hamburger-inner::before, .is-active .hamburger-inner::after {
	background-color: var(--mid-green);
}
.hamburger-inner::before, .hamburger-inner::after {
	content: "";
	display: block; }
.hamburger-inner::before {
	top: -10px; }
.hamburger-inner::after {
	bottom: -10px; }

/*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.1s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.1s 0.14s ease, opacity 0.1s ease; }
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.14s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease, opacity 0.1s 0.14s ease; }
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }

/* /. hamburger */

/* NEW 2022 10 05 */

.navbar-nav .help-link {
    border-left: 1px solid var(--navy-blue);
}
.navbar-nav .help-link:first-child {
    border-left: none;
}

@media (max-width: 992px) {	
    
	.footer-nav {
	    width: 100%;
	}
	.footer-nav li{
	    display: block; 
	}
	.footer-nav li a{
	    padding: 8px 0;
	    /* display: block;  */
	    border:none;
	}
	
	.main-content-navigation li a{
		display: block; 
		text-align:center; 
		
	}
	.id-31 .hamburger-inner, 
	.id-31 .hamburger-inner::before, 
	.id-31 .hamburger-inner::after{
		background-color:var(--navy-blue);
	}
	.main-content-navigation{
	    margin-top:10px;
		margin-bottom:10px;
	}
}

@media (max-width: 768px) {	
    .nav-tabs .nav-link{
        height: 4em;
    }
	.main-content-navigation li{
		width: 50%; 
	}
	.nav-tabs .nav-item{
		margin-bottom: 8px; 
	}
	.main-content-navigation ul{
		
		border-bottom: none;
		/* float:left; */
	}
}

@media (min-width: 768px) {	
	/* .sidebar-overlay .navbar-nav li a{		 */
		/* padding-left: 70px;		 */
	/* } */

	.nav-identity, .sidebar-intro{
		padding-left: 0; 
	}
	.nav-identity{		
		padding-left: 70px; 
	}
	.sidebar-dashboard-nav .navbar-nav li a{
		padding-left: 70px; 
	}
}

@media (min-width: 992px) {	
    
    .sibling-nav .row {
        border-left:1px solid var(--pale-blue-bg);    
    }
    .sibling-nav a {
        
        font-size: 14px; 
    }
    
	.main-content-navigation{
		height: 30px; 
		margin-top: 35px; 
		margin-bottom: 15px; 
	}
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {		
		background-color: #fff;
		display: none;
	}
	.help-link .nav-link{
		display: inline-block; 		
	}
	.sidebar-dashboard-nav .navbar-nav li {
		font-size: 16px;
	}
	.hamburger {
		position: fixed; 
	}
	.navbar-expand .navbar-nav .nav-link{
		padding-right: .75rem;
		padding-left: .75rem;
	}
	.sidebar-overlay .navbar-nav{
		margin-top: 165px; 
	}
	.hamburger {	  
	  top: 11px; 	  
	}
	.sibling-nav {
        padding-left: 310px;
    }
    .sidebar-hidden .sidebar{
        /* width of sidebar when closed */
        width: 90px; 
    }
    .sidebar-hidden .sibling-nav{
        padding-left: 90px;
    }
}

@media (min-width: 1200px) {	
	.sidebar-overlay .navbar-nav li a{		
		padding-left: 90px;		
	}
	.sidebar-footer ul li a{
		padding-left: 90px;		
	}
	.nav-identity, .sidebar-intro{
		padding-left: 0; 
	}
	.nav-identity{		
		padding-left: 90px; 
	}
	.sidebar-dashboard-nav .navbar-nav li a{
		padding-left: 90px; 
	}
	
	.section-nav li{		
		font-size: 14px; 
		padding: 0 25px 0 90px;
	}
	.main-content-navigation li a{		
		font-size: 14px; 
		padding-left: 15px;
		padding-right: 15px;		
	}
	.main-content-navigation{
		height: 35px; 
		margin-top: 35px; 
		margin-bottom: 10px; 
	}
	.sibling-nav {
        padding-left: 480px;
    }
    .sidebar-hidden .sibling-nav{
        padding-left: 90px;
    }

}

@media (min-width: 1400px) {	
	
	.nav-identity, .sidebar-intro{
		padding-left: 0; 
	}
	
	.navbar-expand .navbar-nav .nav-link{
		padding-right: 1rem;
		padding-left: 1rem;
	}
	
}

@media (max-height: 768px) {	
	
}

@media (max-height: 560px) {	

}


/*AP 18-07-2023*/

.topbar .main-menu{
    flex-direction: row;
    display:flex; 
    width:100%;
    justify-content: end;
    margin-right:100px;
}

.topbar .main-menu .nav-link{
    color: #0C499C;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 600;
    padding-bottom:0.15rem;
    border-bottom:2px solid transparent; 
}

.topbar .main-menu .nav-link:hover{
    border-bottom:2px solid #3FAE29; 
}