/* Your rules to style the menu in mobile view (collapsible mode) here... */
.sm-la-nav ul {
	  background: #f9f9f9;
	  border: 1px solid #83846b;
}
.sm-la-nav ul a {
	padding: 2px 10px;
	line-height: 1.5;
}

.sm-la-nav > li > a {
  	padding: 1px 7px;
}

.sm-la-nav:not(.sub_menu_left) ul li a.has-submenu {
	padding-right:30px;
}

.sm-la-nav.sub_menu_left ul li a.has-submenu {
	padding-left:30px;
}

/* Sub menu indicators
===================*/

.sm-la-nav a span.sub-arrow {
	position:absolute;
	right:12px;
	top:50%;
	margin-top:-3px;
	/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
	width:0;
	height:0;
	overflow:hidden;
	border-width:4px; /* tweak size of the arrow */
	border-style:solid dashed dashed dashed;
	border-color:#555 transparent transparent transparent;
}
.sm-la-nav-vertical a span.sub-arrow,
.sm-la-nav ul a span.sub-arrow {
	right:15px;
	top:50%;
	margin-top:-5px;
	border-width:5px;
	border-style:dashed dashed dashed solid;
	border-color:transparent transparent transparent #555;
}

.sm-la-nav-vertical.sub_menu_left a span.sub-arrow,
.sm-la-nav.sub_menu_left ul a span.sub-arrow {
	left: 10px;
	right: 0;
	border-color:transparent #555 transparent transparent;
}


/* === Handling the vertical ellipsis icon === */

.sm-la-nav .vertical-ellipsis-icon:after {
	content: '\22EE';
}

.sm-la-nav .vertical-ellipsis-icon {
	font-size: 1.4em;
	font-weight: bold;
	padding: 0 8px;
}

.sm-la-nav .vertical-ellipsis-icon .sub-arrow {
	display: none;
}


@media (min-width: 768px) {

	/* Switch to desktop layout
	-----------------------------------------------
	   These transform the menu tree from
	   collapsible to desktop (navbar + dropdowns)
	-----------------------------------------------*/
	/* start... (it's not recommended editing these rules) */
	.sm-la-nav ul{position:absolute;width:12em;}
	.sm-la-nav li{float:left;}
	.sm-la-nav.sm-rtl li{float:right;}
	.sm-la-nav ul li,.sm-la-nav.sm-rtl ul li,.sm-la-nav.sm-vertical li{float:none;}
	.sm-la-nav a{white-space:nowrap;}
	.sm-la-nav ul a,.sm-la-nav.sm-vertical a{white-space:normal;}
	.sm-la-nav .sm-nowrap > li > a,.sm-la-nav .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
	/* ...end */


	/* Your rules to style the menu in desktop view here... */
}