/*************************************************************************
http://www.sitepoint.com/css3-vertical-accordion_login-sidenav-using-target-selector/
https://www.w3schools.com/w3css/w3css_sidebar.asp
*************************************************************************
How to Create a CSS3-Only Vertical accordion_login-sidenav Using the :target Selector/
/*************************************************************************
	Used for login
*************************************************************************/

/* The side navigation menu 
	https://www.w3schools.com/howto/howto_js_login-sidenav.asp
	*/
.login-sidenav {
    height: auto; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 700; /* Stay on top */
    top: 5px;
    right: 0;
	background-color: #ffffff; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px; /* Place content 60px from the top */
	 padding-bottom: 20px; /* Place content 60px from the bottom */
    transition: 0.5s; /* 0.5 second transition effect to slide in the login-sidenav */
	
}

/* The navigation menu links */
.login-sidenav a {
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    font-size: 18px;
    color: #ffffff;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color 
color: #26AE58;*/
.login-sidenav a:hover, .offcanvas a:focus{
    color: #1A4B9D;
}


/* Position and style the close button (top right corner) */
.login-sidenav .closebtn {
    position: absolute;
	color: #1A4B9D;
    top: 20px;
    right: 15px;
    font-size: 48px;
    
}

/* On smaller screens, where height is less than 450px, change the style of the login-sidenav (less padding and a smaller font size) */
@media screen and (max-height: 416px) {
    .login-sidenav {padding-top: 15px;}
    .login-sidenav a {font-size: 18px;}
}

article.accordion_login-sidenav
{
	display: block;
	width: 250px;
	padding: 0.5em 0.5em 3px 0.5em;
	margin: 0 auto;
	background-color: #ffffff;
	border-radius: 0px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

article.accordion_login-sidenav section
{
	display: block;
	font-size: 20px;
	width: 240px;
	height: 2em;
	padding: 0 5px 0 5px;
	margin: 0 0 0 0;
	color: #fff;
	background-color: #ffffff;
	overflow: hidden;
	border-radius: 0px;
}

/*************************************************************************
The section title is now styled to use all the available room in the closed state:
*************************************************************************/
article.accordion_login-sidenav section h2
{
	font-size: 14px;
	font-weight: bold;
	width: 100%;
	line-height: 125%;
	padding: 0;
	margin: 0;
	color: #fff;
	text-align:left;
}

article.accordion_login-sidenav section h2 a
{
	display: block;
	width: 100%;
	line-height: 150%;
	text-decoration: none;
	color: #1A4B9D;
	outline: 0 none;
	
	
}

  
/*************************************************************************
We can now ‘open’ the active section using the :target selector. We set a larger height and background color, then enlarge and re-color the title too:
*************************************************************************/
article.accordion_login-sidenav section:target
{
	height: auto;
	background-color:#ffffff;
}

article.accordion_login-sidenav section:target h2
{
	font-size: 22px;
	color: #ffffff;
}
/*************************************************************************
If necessary, you can set the section height to auto so it uses the minimum space it requires. However, that makes it impossible to add nice CSS3 transitions which smoothly resizes the element…
*************************************************************************/

article.accordion_login-sidenav section,
article.accordion section h2
{
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.alerts-sidenav {
    height: auto; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 700; /* Stay on top */
    top: 5px;
    right: 0;
	background-color: #ffffff; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px; /* Place content 60px from the top */
	 padding-bottom: 20px; /* Place content 60px from the bottom */
    transition: 0.5s; /* 0.5 second transition effect to slide in the alerts-sidenav */
	
}

/* The navigation menu links */
.alerts-sidenav a {
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    font-size: 18px;
    color: #ffffff;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color 
color: #26AE58;*/
.alerts-sidenav a:hover, .offcanvas a:focus{
    color: #1A4B9D;
}


/* Position and style the close button (top right corner) */
.alerts-sidenav .closebtn {
    position: absolute;
	color: #1A4B9D;
    top: 20px;
    right: 15px;
    font-size: 48px;
    
}

/* On smaller screens, where height is less than 450px, change the style of the alerts-sidenav (less padding and a smaller font size) */
@media screen and (max-height: 416px) {
    .alerts-sidenav {padding-top: 15px;}
    .alerts-sidenav a {font-size: 18px;}
}

article.accordion_alerts-sidenav
{
	display: block;
	width: 250px;
	padding: 0.5em 0.5em 3px 0.5em;
	margin: 0 auto;
	background-color: #ffffff;
	border-radius: 0px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

article.accordion_alerts-sidenav section
{
	display: block;
	font-size: 20px;
	width: 240px;
	height: 2em;
	padding: 0 5px 0 5px;
	margin: 0 0 0 0;
	color: #fff;
	background-color: #ffffff;
	overflow: hidden;
	border-radius: 0px;
}

/*************************************************************************
The section title is now styled to use all the available room in the closed state:
*************************************************************************/
article.accordion_alerts-sidenav section h2
{
	font-size: 14px;
	font-weight: bold;
	width: 100%;
	line-height: 125%;
	padding: 0;
	margin: 0;
	color: #fff;
	text-align:left;
}

article.accordion_alerts-sidenav section h2 a
{
	display: block;
	width: 100%;
	line-height: 150%;
	text-decoration: none;
	color: #1A4B9D;
	outline: 0 none;
	
	
}

  
/*************************************************************************
We can now ‘open’ the active section using the :target selector. We set a larger height and background color, then enlarge and re-color the title too:
*************************************************************************/
article.accordion_alerts-sidenav section:target
{
	height: auto;
	background-color:#ffffff;
}

article.accordion_alerts-sidenav section:target h2
{
	font-size: 22px;
	color: #ffffff;
}
/*************************************************************************
If necessary, you can set the section height to auto so it uses the minimum space it requires. However, that makes it impossible to add nice CSS3 transitions which smoothly resizes the element…
*************************************************************************/

article.accordion_alerts-sidenav section,
article.accordion section h2
{
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}