/* ========= CSS - ADMIN MENU ================ */
/*   Used with ddaccordion.js drop down menu   */    


#menu-button {
	display:none;
}

#accordion a.loginlink {
	display:none;
}

ul.arrowlistmenu {
	list-style-type: none;
}

.arrowlistmenu {
	background:#e0ebeb;
	width: 100%; /*width of accordion menu*/
	height:100%;
	padding-top:1px;
	padding-left:0;
}

.arrowlistmenu a.expandable, .arrowlistmenu a.loginlink { /*CSS class for menu headers in general (expanding or not!)*/
	background:#718ca1;
	color: #FFF;
	cursor: pointer;
	display: block;
	padding: 15px 15px 15px 42px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	border-bottom: 1px solid #CCC;
	position: relative;
	transition: all 0.4s ease;
	margin:0;
}

.arrowlistmenu a.expandable i, .arrowlistmenu a.loginlink i {
	position: absolute;
	top: 16px;
	left: 12px;
	font-size: 18px;
	color: #FFF;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.arrowlistmenu .minimise{ /*CSS class to apply to expandable header when it's expanded*/
	cursor: pointer;
	display: block;
	padding: 15px 15px 15px 42px;
	color: #feda6a !important;
	font-size: 14px;
	font-weight: 700;
	border-bottom: 1px solid #CCC;
	position: relative;
	transition: all 0.4s ease;
	background:#6f95bc;
}

.arrowlistmenu .minimise i{ /*CSS class to apply to expandable header when it's expanded*/
	color: #feda6a !important;
	transition: all 0.4s ease;
}

.arrowlistmenu a.expandable i.fa-chevron-down, .arrowlistmenu a.expandable i.fa-chevron-right, .arrowlistmenu a.loginlink i.fa-chevron-right {
	right: 12px;
	left: auto;
	font-size: 16px;
}

.arrowlistmenu a.minimise i.fa-chevron-down {
	transform: rotate(180deg);
}

.arrowlistmenu a:hover { /*CSS class to apply to expandable header when it's expanded*/
	background:#59748c;
	color:#FFFFFF ;
}

div.categoryitems a {
	padding-left:12px ;
	color: #FFF ;
}

/* ================= sub menu ===================== */

.categoryitems ul{ /*CSS for UL of each sub menu*/
	background-color: #a7bcb9; /* this is now good */
	list-style-type: none;
	color:#ebf6f5;
	font-size: 14px;
	padding-left:0;
	margin-bottom:0;
}

.arrowlistmenu div.categoryitems ul li{
	border-bottom: 1px solid #4b4a5e;; /*bottom spacing between menu items*/
}

.arrowlistmenu div.categoryitems ul li a, .arrowlistmenu div.categoryitems ul li a:visited{
	display: block;
	text-decoration: none;
	color: #FFF;
	padding: 15px 15px 15px 15px;
	-webkit-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.arrowlistmenu div.categoryitems ul li a i {
	margin-right:5px;
	color: #FFF;
}
.arrowlistmenu div.categoryitems ul li a:visited{
	color: #FFF;
}

.arrowlistmenu div.categoryitems ul li a:hover, .arrowlistmenu div.categoryitems ul li a:hover i{ /*hover state CSS*/
	background-color:#e0ebeb;
	color: #36595f;
}

.arrowlistmenu div.categoryitems ul li a {
	padding-left:25px;

}


@media (max-width: 768px), 
       (min-resolution: 192dpi) and (max-width: 768px), 
       (min-resolution: 2dppx) and (max-width: 768px) {


#menu-button {
	align-items: flex-start;
	flex:10;
	display: block;
	width:40px;
	text-decoration: none;
	font-size: 2.0em;
	font-weight: 700;
	color: #FFF;
	padding: 6px 2px 6px 10px;
	cursor: pointer;
}

#leftCol {
	position: absolute; /* Remove from the normal flow */
	width: 0; /* Collapse the width */
	visibility: hidden; /* Hide visually */
}

.arrowlistmenu {
	order: 1;                     /* Keep it first */
    position: fixed;
    top: 4.4em;
    left: -100%; /* Menu off-screen */
    width: 100%;
	height: calc(100% - 4.4em);
    z-index: 1000;
	visibility:visible;
    transition: left 0.8s ease;
}

#accordion a.loginlink {
	display:block;
}
/* 
.arrowlistmenu > ul {
    max-height: 90vh;
    overflow: auto;  Allow scrolling if content is long 
	}
	
.arrowlistmenu > ul.open {
	display: block;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	background:#FFF;
	max-height:90vh;
	overflow:auto;
}
*/

}