/**
 * Nav menu icon demo
 */

.menu-icon-demo-outer {
	margin-bottom: 2em;
}

.menu-icon-demo-outer figcaption {
	margin-top: 0.5em;
	text-align: center;
}

.menu-nav-menu-icon-demo-container {}

.menu-icon-demo {
	display: inline-flex;
	margin-left: auto;
	margin-right: auto;
	list-style-type: none;
	padding: 0;
	margin: 0;
	/* border: 1px solid blue; */
	background-image: linear-gradient(to bottom, #ffffffaa, transparent 125%);
	border: 1px solid #00000044;
	border-radius: 0.5em;
	box-shadow: 0 0 1em #00000022;

	font-size: 12pt;
	flex-direction: column;
	width: 100%;
	position: relative;
}

.menu-icon-demo .sub-menu {
	position:  absolute;
	text-align: left;
	background-color:  #ffffffee;
	border: 1px solid #00000044;
	border-radius: 0.25em;
	box-shadow: 0 0 2em #00000022;
	top:  100%;
	/* left:  50%; */
	/* transform:  translateX( -50%  ); */
	left:  -2em;
	z-index: 100;
	display: none;
}

.menu-icon-demo .menu-item {
	display: block;
	padding: 0;
	margin: 0;
	/* line-height: 1em; */
	position:  relative;
}

@media( min-width:  922px ) {
	.menu-icon-demo .menu-item.menu-item-has-children .sub-menu {
		/* transition: 0.3s; */
		border: 2px solid #00000088;
	}

	.menu-icon-demo .menu-item.menu-item-has-children:hover .sub-menu {
		display:  block;
	}

	.menu-icon-demo > .menu-item:last-of-type > .sub-menu {
		left:  unset;
		right:  0;
	}

	.menu-icon-demo .sub-menu .menu-item > .menu-link {
		white-space: nowrap;
	}

	.menu-icon-demo .sub-menu .menu-item:not( :last-of-type ) > .menu-link {
		border-bottom: 1px dotted #00000066;
	}
}

/* .menu-icon-demo .menu-item>.menu-link { */
.menu-icon-demo .menu-item > a {
	display: block;
	/* border:  1px solid red; */
	line-height: 1.5em;
	/* padding:  1em; */
	padding: 0.75em 1em;
}

.menu-icon-demo .menu-item:not(.no-label)> a >i {
	margin-right: 0.5em;
}

.menu-icon-demo .menu-item> a >i {
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}


@media(min-width: 922px) {
	.menu-ajax-login-demo-container,
	.menu-nav-menu-icon-demo-container {
		text-align: center;
	}

	.menu-icon-demo {
		flex-direction: row;
		width: inherit;
	}

	.menu-icon-demo .menu-item:not( :last-of-type) {
		border-right: 1px dotted #00000066;
	}
}

@media(min-width: 1024px) {
	.menu-icon-demo {
		font-size: 14pt;
	}
}

.menu-item > a .fa-star {
	color: yellow;
}

.menu-item > a .fa-microphone {
	color: lightgreen;
}

.menu-item > a .fa-birthday-cake {
	color: orange;
}

.menu-item > a .fa-hippo {
	color: lightgrey;
}

.menu-item > a .fa-bacon {
	color: pink;
}

.menu-item > a .fa-phone {
	color: #8e80ff;
}

.menu-item > a .fa-envelope {
	color: #80d1ff;
}

.menu-item > a .fa-image {
	color: #ff8080;
}

.menu-item > a .fa-user {
	color: #c8ffbf;
}


/**
 * AJAX Login
 */
.sub-menu.wptajl-container {
	padding: 1em;
	box-shadow: 0 0 3em #00000022;
	min-width: 15em;
	position: absolute;
}

.wptajl-container input,
.wptajl-container button {
	display: block;
	width: 100%;
	position: relative;
	transition: 0.3s;
}

.wptajl-container button {
	font-weight: bold;
	padding: 0.75em 0;
}

.wptajl-container label {
	font-size: 11pt;
}

.wptajl-container .form-row:not( :last-of-type) {
	margin-bottom: 1em;
}

.wptajl-container .form-row:last-of-type {
	margin-bottom: 0;
}

.wptajl-container button:disabled,
.wptajl-container input:disabled {
	opacity: 0.75;
}

.wptajl-container .login-spinner {
	display: none;
	width: 1.5em;
}

.wptajl-container.working .login-spinner {
	display: block;
	position: absolute;
	right: 0.5em;
	top: 50%;
	transform: translateY(-50%);
}

.menu-item-login {
	font-weight: bold;
}