@import url('https://fonts.googleapis.com/css2?family=Inter&family=Sora&display=swap');

/*
	Base styles
	===
	Palette:
	yellow: ffd000
	pale-grey: #f3f3f3
	dark-grey: #333	
	light-blue: 0080c9
	navy-blue: 1b3e90 
	muted-blue:35476e
	
.success{
	color:#008000;
}
.danger{
	color:#ffa500;
}
.error{
	color:#ff0000;
}
	
	
*/
:root{
	--yellow:#ffd000;
	--pale-grey:#f3f3f3;
	--light-grey:#606376;
	--dark-grey:#333;
	--light-blue:#0080c9;	
	--navy-blue:#0C499C;
	--muted-blue:#35476e;	
	--pale-blue-bg:#DAE4EB;
	--mid-green:#3FAE29;
	--pale-green:#81C8A1;
}

.hidden {
	display: none !important;
}

.success{
	color:#008000;
}
.danger{
	color:#ffa500;
}
.error{
	color:#ff0000;
}
a{
	color:var(--navy-blue);
}
a:hover{
	color:var(--muted-blue);
}
body{
	font-family: 'Sora', 'Aptos', 'Inter', 'Open Sans';
	/* font-family: , Arial, sans-serif;	 */
	background:var(--pale-blue-bg);
	height:100vh;	
}

p, li{
	font-family: 'Inter', 'Sora', 'Open Sans';
	font-size: 16px; 
	line-height: 1.3;
	font-weight: 400; 
}

h1, .h1{
	font-size: 32px; 
	line-height: 1.3;
	font-weight: 600;     
}
h2, .h2{
	font-size: 28px; 
	line-height: 1.2;
	font-weight: 600;	
}
h3, .h3{
	font-size: 26px;
	line-height: 1.2;
	font-weight: 600;
	color:var(--navy-blue);
}
h4{
	font-size: 22px; 	
	line-height: 1.2;
	font-weight: 600; 
}
h5{
	font-size: 20px; 
	line-height: 1.2;
	font-weight: 600;
}
h6{
	font-size: 16px; 
	line-height: 1.2;
	font-weight: 600;
}


/* header{} */

.main-content h1, 
.main-content h2, 
.main-content h3, 
.main-content h4, 
.main-content h5, 
.main-content h6{
	color:var(--navy-blue);
}
.main-content p, 
.main-content li{
	color:var(--light-grey);
}

.site-wrapper{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.section-content-wrapper{	
	height: 100vh;	 
	width: 100%; 
	margin-left: 0; 
	transition: .4s ease-in-out;
	
	z-index: 0; 
}


.section-content-wrapper::after {
	visibility:hidden;
	opacity: 0; 	
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1 );
	z-index: 100;
	transition: 0.4s;	
}
.sidebar{
    /* ecoSMRT colour but it needs a base colour for the sidebar! */
    background:var(--navy-blue);
}
.sidebar-overlay-open .section-content-wrapper::after {
	visibility:visible;
	opacity: 1; 	
}

.sidebar-overlay-open .section-content-wrapper{
	opacity: 0.4; 
	filter:blur(5px);
}
.section-content-wrapper::before{
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: 100;
	display: none; 
	transition: 0.4s; 
	transition-delay: 0.4s; 	
}
.sidebar-overlay-open .section-content-wrapper::before{
	height: 100%;
	opacity: 1; 
	background: rgba(0, 0, 0, 0.3);
}
.sidebar-indented{
    padding: 0 15px 0 15px;
}
.main-content{
	-webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    z-index: 1;
    padding-top:5.2rem;
}

.main-content-pt{
	padding-top: 100px; 
}
.main-content-pb{
	padding-bottom: 100px; 
}
.nav-identity{
	height: 75px; /* should match header height */
	line-height: 100px;
	padding-left: 100px; 
	background:#fff;
	border-bottom: 1px solid var(--pale-blue-bg);
}
.site-logo{
	height: 80px; line-height: 80px;
}
.site-logo img, .site-logo svg{
	width:160px;
	transition: 0.3s; 
}


.sidebar{
	width: 0;	
	min-height: 100vh;		
	margin-top: 0;
	/* padding-top: 0;	 */
	/* padding-top: 60px;	 */
	position: fixed; 	
	background:#fff;
	/* border: 3px dashed red; */
	transition: width .4s ease-in-out;	
	z-index: 1500; 
}

.sidebar h1, 
.sidebar h2{
    color:var(--navy-blue);
} 

.sidebar p, 
.sidebar li {color:var(--light-grey);}

.sidebar .sidebar-heading{
	margin-bottom:20px;
} 

.nav-identity,
.sidebar-intro {
	padding-left:100px; 	
	padding-right: 0px; 
}

.sidebar-intro{
	padding-top: 0px; 
}

.sidebar-overlay{
	width: 100vw; 
	transform: translateX(-100%);
	height: 100vh;
	z-index: 1500; 
	background:var(--navy-blue);
	transition: .4s ease-in-out;
	position: absolute; 
	top: 0;
	left: 0; 
	overflow-y:auto;
}

.is-active .sidebar-overlay{
	transform: translateX(0);
}

.topbar{
    height: 5.2rem;
	z-index: 1750;
	background:#fff;
	/* border: 3px dashed yellow; */
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
	border-bottom: 1px solid var(--pale-blue-bg);
	padding-left: 15px;
	padding-right: 15px; 
}


.topbar .btn{
	margin: auto 0 auto 10px; 	
}

.page-update-message{
	position: fixed;
    top: 0;
    left: 0;
	z-index: 2000; 
	overflow:hidden;
	text-align:center; 
	width: 60%; 
    margin: 0 20%
}
.page-update-message span {
    background-color: var(--yellow);
    color: var(--light-grey);
    padding: 10px 20px;
    display: inline-block;
    opacity: 0;
    transition: opacity .4s ease,transform .4s ease;
    transform: translateY(-10px)
}

.page-update-message.active span {
    opacity: 1;
    transform: translateY(0)
}

/* Home page */
.section-home-main{
	min-height:100vh; 	
	position: relative; 
}

body.id-1{
	overflow:hidden;  
}
.sticky-footer{
	padding-top:15px; 
	padding-bottom:15px; 
	
}
.sticky-footer p:last-child{
	margin-bottom: 0; 
}
.template-4 .sticky-footer{
    padding-bottom: 60px; 
}

a.boldLink {
	font-weight: 700;
}

/* login form */
.login-form-panel{
	display: none; 	    
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 100;        
	width:  400px;    		
	overflow: hidden; 	
}
.login-form-panel.open{
	display: block; 
}
.loginLogin{
	opacity: 0; 
	padding: 20px; 
	background: #eee;
	transform: translateY(-30px);
	transition: 0.5s ease-in-out; 
}
.loginLogin.active{
	transform: translateY(0px);
	opacity: 1; 
}
.form-logo{
	width: 120px; 
	margin-bottom:45px; 
}	

.login-form-panel input:not(.btn-submit){
	background: transparent; 
	color: #333;
	border: none; 
	border-bottom: 1px solid #fff;
	box-shadow: none; 
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
	border-radius: 0; 
	border:1px solid var(--muted-blue);
}
label{color:var(--navy-blue);}
/* Contact form */
/*
fieldset {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 15px;
}
fieldset.personal label, 
fieldset.personal input{
    color:#777;
}
legend{
    font-size: 1rem;
    color:var(--navy-blue);
     width:inherit; 
    padding:0 10px; 
    border-bottom:none;
}
p.error{
    padding: 10px; 
    background: #ff0000;
    color:#fff;
}
p.success{
    padding: 10px; 
    background: #008000;
    color:#fff;
}
*/
/* END */

.success{
	color:#008000;
}
.danger{
	color:#ffa500;
}
.error{
	color:#ff0000;
}
.badge{
	padding: 5px 5px; 
	width: 90%; 
	text-transform: uppercase; 
	background: #008000;
	color:#fff;
	font-size: 10px; 
	font-weight: 700;
	border-radius: 10px 0; 
}
.badge-inactive{
	background:var(--muted-blue);
}

.btn{
	border-radius: 15px 0;
	border:none;
	text-transform: uppercase;
	font-size: 11px; 
	font-weight: 400;	
	position: relative; 
	overflow:hidden;
	transition: 0.4s;
	padding: .5rem .5rem;
}
.btn span{
	position: relative; 
	z-index: 10; 
}
.btn::before{
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
	
}
.btn-primary, .btn-primary.focus, .btn-primary:focus{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#08c896+0,3fae29+100 */
    background: #08c896; /* Old browsers */
    background: -moz-linear-gradient(top,  #08c896 0%, #3fae29 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #08c896 0%,#3fae29 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #08c896 0%,#3fae29 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08c896', endColorstr='#3fae29',GradientType=0 ); /* IE6-9 */

	border-color: var(--mid-green);
	color:#fff;	
}
.btn-primary:hover{
	background-color: var(--mid-green);
	border-color: var(--mid-green);
	color:#fff;	
}
.btn-primary:hover::before{
	background-color: var(--mid-green);	
	width: 100%;
}
.btn-secondary, .btn-secondary.focus, .btn-secondary:focus{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0080c9+0,0c499c+100 */
background: #0080c9; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #0080c9 0%, #0c499c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #0080c9 0%,#0c499c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #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-color: var(--navy-blue);
	color:#fff;
}
.btn-secondary:hover{
	background-color: var(--navy-blue);
	border-color: var(--navy-blue);
	color:#fff;
}

.btn-secondary:hover::before{
	background-color: var(--navy-blue);	
	width: 100%;
}
.btn-outlined, .btn-outlined.focus, .btn-outlined:focus{
    color:var(--navy-blue);
	border:1px solid var(--navy-blue);
	background:transparent;
}
.btn-outlined:hover{
	background:transparent;
	border-color: var(--navy-blue);
	color:var(--navy-blue);
}
.btn-outlined:hover::before{
	background-color: var(--pale-blue-bg);
	width: 100%;
}



.btn-outlined-white, .btn-outlined-white.focus, .btn-outlined-white:focus{
	border:2px solid #fff;
	color:#fff;
	background:transparent;
}

.btn::after{
	content:'';
	height:100%;
	width:100%;
	background:var(--muted-blue);
	position:absolute;
	top:0;
	left:0;
	transform:translateX(-100%);
	transition: 1s cubic-bezier(0.81, 0.07, 0.26, 0.81);	
	transition-delay:0.8s;
}
.btn-primary::after{
	background:var(--mid-green);
}
.btn-secondary::after{
	background:var(--navy-blue);
}
.btn-outlined::after{
	background:var(--pale-blue-bg);
}
.btn-outlined-white::after{
	background:var(--muted-blue);
}

.btn.animated::after{	
	transform:translateX(100%);	
}
.btn-outlined-white:hover{
	background:transparent;
	border-color: #fff;
	color:var(--light-grey);
}
.btn-outlined-white:hover::before{
	background-color: var(--muted-blue);
	width: 100%;
}
.btn-icon{
	padding-left: 1.75rem; 
}
.btn-icon i{
	position: absolute; 
	left: -15px; 
	top: 2px; 
}
/* .icon-left{} */

/* Tables */
.table td, .table th{
	background:#fff;
}
.table td{
	font-size: 14px; 
}
.table-accounts .name a{
	color:var(--navy-blue);
}

.table-accounts th{
	border:none; 
	background: var(--navy-blue);
	color:#fff;
	font-size: 12px; 
	text-transform: uppercase; 
	position: relative; 
}
.table-accounts th:last-child{
	border-radius: 0 15px 0 0 ;
}

.loginLoginForm input[type="text"], 
.loginLoginForm input[type="email"], 
.loginLoginForm input[type="password"]{
	border-radius: 0 0 0 0; 
	border-color:var(--light-grey);
} 

.back-link{
	display: inline-block; 
	margin-top: 10px; 
}
.status-badge{
	font-weight: 700; 
	text-transform: uppercase;
	font-size: 12px; 
}
.table .btn{	
	top: -3px; 
}

.card{
    /*border-radius: 8px;
    overflow:hidden;
    */
    border:none; 
    background:transparent;
    position: relative;
    
}
.card-inner{
    border-radius: 12px;
    overflow: hidden;
}

.eco-panel{
    background:#fff;
    border-radius:8px;
    padding:32px 32px 16px;
    box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.1);
}
.login-panel {
    background:#fff;
    border-radius:8px;
    padding:32px 32px 16px;
    box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.1);
}


.scroller-wrapper{
	position: static; 
	top: 35px; 
	left: 0; 
	width: 100%; 
}
.scroller {  
/* height: 440px;   */
	height: calc(100vh - 100px );
	/* border: 3px solid orange; */
}
.scroller-content {
    padding: 60px 0 0 0; 
	/* border-bottom: 3px solid aqua; */
}
.os-scrollbar-vertical{
	transition: opacity 0.4s!important; 
	/* opacity: 0!important; */
}
/* .scroller:hover .os-scrollbar-vertical{ */
	/* opacity: 1!important; */
/* } */
.file-details .inner{
    padding: 10px 10px; 
    background:#fff;
	border: 1px solid transparent;
    border-bottom: 1px solid #eee;
	transition: 0.4s;
	margin-bottom: 2px; 
	color:var(--light-grey);
}    
.file-details .inner:hover{
	border: 1px solid var(--navy-blue);
}
.file-icon{
	color:var(--navy-blue);
	font-size: 22px;
}
.btn.download-link {
	padding-left: 2rem; 
	position: relative;
}
.download-link i{
	position:absolute;
	top: 2px; 
	left: -16px; 
}

.pagination{
    display:block; 
}
.sisea-page a{
	color:var(--navy-blue);
	display:inline-block;
	padding:5px 10px; 
	border:1px solid #ddd;
	margin: 0 1px; 
	transition: 0.4s; 
	font-weight: 700; 
	font-size: 14px; 
}
.sisea-page.sisea-current-page a{
	color:#fff;
	display:inline-block;	
	border:1px solid var(--navy-blue);
	background:var(--navy-blue);
}
.sisea-page:not(.disabled) a:hover{
	text-decoration:none; 
	color:var(--light-grey);
	display:inline-block;	
	border:1px solid var(--navy-blue);
	background:var(--navy-blue);
}
.sisea-page.disabled a{
	color:#aaa;
	cursor:default;
}
.pagination-dots {
	color:var(--navy-blue);
	display:inline-block;
	padding:5px 8.02px; 
	border:1px solid #ddd;
	margin: 0 1px; 
	transition: 0.4s; 
	font-weight: 700; 
	font-size: 14px; 	
}
.modal{z-index:2000;}
.modal-backdrop {z-index: 1990;}

/* User Guide */
.number{
	background: var(--light-blue);
	font-weight: 700;
	font-size: 18px; 
	width: 30px;
	height: 30px;
	line-height: 30px; 
	text-align:center; 
	color:#fff;
	display: inline-block;
	border-radius: 30px; 
	margin-bottom: 6px; 
}
.guide-item{
	margin-top:3em;
	margin-bottom:3em;
}
.guide-item p,
.guide-item li{
	font-size: 16px;
}
.guide-item li{
	margin-bottom: 0.5em;
}
.site-logo-mobile svg{
    display: none; 
}
@media (max-width: 992px) {	
	.id-31 .section-content-wrapper{
		height: 100vh;
	}
    .sidebar-info{
	    display: none; 
	}
	.site-logo{
	    position:absolute; left:0; width:100%; z-index:0; text-align:center
	}
	
	.site-logo-mobile{
	    position:absolute; top:11px;left:0; width:100%; z-index:0; text-align:center
	}
	.site-logo span{
	    display:inline-block; margin: 0 auto; width: auto;
	}
	.site-logo svg{
	    width: 160px;
	    display:block;
	}
	/* .id-31 .site-logo-mobile svg path{ */
	   
	/* } */
}

@media (max-width: 768px) {	
	
}
@media (max-width: 560px) {}

@media (max-width: 375px) {
	.topbar .btn{
		margin: auto 0 auto 10px; 	
		padding: .5rem .5rem;
		font-size: 11px; 
	}
}


@media (max-width: 340px) {
	.topbar .btn{
		margin: auto 0 auto 8px; 	
		padding: .5rem .35rem;
		font-size: 10px; 
	}
}
@media (max-width: 320px) {
	.topbar .btn{
		margin: auto 0 auto 5px; 	
		padding: .5rem .25rem;
		font-size: 10px; 
	}
}
	


@media (min-width: 768px) {
	.section-padding{
		padding-top: 45px;
		padding-bottom: 45px;
	}
	.lesson-crumbs{		
		font-weight: 700; 
	}   
}



@media (min-width: 992px) {
	.lesson-crumbs{
		font-size: 14px; 
		font-weight: 700; 
	}
	
	.scroller-wrapper{
		position: absolute; top: 35px; left: 0; width: 100%; 
	}
	
	p, li{
		font-size: 16px; 
		line-height: 1.3;
	}
	
	h1, .h1{
		font-size: 36px; 
		line-height: 1.3;		
	}
	h2, .h2{
		font-size: 28px; 
		line-height: 1.2;		
	}
	h3, .h3{
		font-size: 22px; 		
		line-height: 1.2;			
	}
	h4{
		font-size: 20px; 	
		line-height: 1.2;		
	}
	h5{
		font-size: 18px; 
		line-height: 1.2;		
	}
	h6{
		font-size: 16px; 
		line-height: 1.3;		
	}
	 
	
	.btn{		
		font-size: 12px; 
		font-weight: 600;		
		padding: .5rem .75rem;
	}
	.sidebar{
		width: 310px;
	}
	.sidebar-overlay{
		width: 100%; 
	}
	.section-content-wrapper{			
		margin-left: 310px; 		
	}
	.section-content-wrapper{	
		height: 100vh;	 		
	}
	.topbar{
		height: 6.2rem;		
	}
	.site-logo{
		height: 100px; line-height: 100px;
	}
	.guide-item .col{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.main-content{
        padding-top:6.2rem;
    }
	
	
   
}

@media (min-width: 1200px) {
	
	.site-logo img, .site-logo svg{
		width:220px;		
	}
	.btn{
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.btn-icon{
		padding-left: 1.75rem; 
	}
	.section-content-wrapper{		
		margin-left: 420px;
	}
	.sidebar{
		width: 420px;	
	}
	.topbar{
        padding-left: 90px;
        padding-right: 90px; 
	}
	p, li{
		font-size: 16px; 
		line-height: 1.3;
	}

	h1, .h1{
		font-size: 48px; 
		line-height: 1.4;
	}
	h2, .h2{
		font-size: 32px; 
		line-height: 1.3;
	}
	h3, .h3{
		font-size: 24px; 		
		line-height: 1.3;
	}
	h4{
		font-size: 22px; 	
		line-height: 1.3;
	}
	h5{
		font-size: 20px; 
		line-height: 1.3;
	}
	h6{
		font-size: 18px; 
		line-height: 1.3;
	}		
	
	.section-padding{
		padding-top: 60px;
		padding-bottom: 60px;
	}
	
	.sidebar-intro {
		padding-top: 0;
	}
	.sidebar-indented{
        padding: 0 15px 0 90px;
    }
	
}

@media (min-width: 1400px) {	
	
	.sidebar{
		width: 480px;	
	}
	.section-content-wrapper {
		margin-left: 480px;
	}
	
	.guide-item .col div{
		max-width: 420px; 
	}
	.guide-item p,
	.guide-item li{
		font-size: 18px;
	}
	.number {		
		font-size: 18px;
		width: 36px;
		height: 36px;
		line-height: 36px;						
		border-radius: 50px;		
	}

}

.sidebar-hidden .section-content-wrapper {
	margin-left: 135px;
}

.signpost-fullwidth {
	aspect-ratio: 4 / 1;
	border-radius: 0.5rem;
	background: url(/static/template/img/bg-signpost-fullwidth.jpg) no-repeat var(--navy-blue);
	background-size: cover;
	box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.05) inset;
}