/* BOOTSTRAP NAVBAR STYLING */
#navbar-bar {
	background-color: var(--color-background);
	/*background-color: var(--color-light);*/
	/*box-shadow: 0 2px 10px rgba(0,0,0,.5);*/
}
.navbar-brand-a {
	padding: 0;
	font-size: 0;
}
.nav-item {
	margin-right: .5em;
}
.dropdown-menu {
	box-shadow: inset 0 3px 8px #888888;
}
.dropdown-item-wrap {
	/* intended for use with labels and icons */
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	align-content: center;
}
.dropdown-item-wrap > a > i {
	display: none;
}
.dropdown-item {
	transition: background-color var(--transition) linear;
}
.dropdown-item:active {
	color: var(--dark);
	background-color: rgba(135,206,250,.5);
}
.fa-user-circle {
	color: var(--color-light);
	font-size: 1.5em;
	line-height: 0;
}
.signup-link {
	-webkit-animation: glowLightBlue 1s infinite alternate; /* Safari, Chrome and Opera > 12.1 */
	animation: glowLightBlue 1s infinite alternate;
}
@keyframes glowLightBlue {
    to {
        text-shadow: 0 0 10px lightskyblue;
    }
}

@media only screen and (min-width: 961px) {
	.dropdown-menu {
		border-left: none;
		border-right: none;
		border-top: lightskyblue 4px solid;
		box-shadow: 0 5px 30px rgba(0,0,0, 0.1);
		margin-top: 0;

		/*https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property*/
		transition: visibility 0s, opacity 0.1s linear;
		visibility: hidden;
		display: block;  /*required for transition effect*/
		opacity: 0;
		height: 0;
	}
	.dropdown-menu.show{
		visibility: visible;
		opacity: 1;
		height: auto;
	}
	.dropdown-item-wrap > a > i {
		display: inline-block;
		padding-right: 1.5rem;
		transition: transform 0.15s ease-out, color 0.15s ease-out, filter 0.15s ease-out;
	}
	.dropdown-item-wrap > a > i:hover {
		transform: scale(1.1);
		color: var(--color-background);
		filter: drop-shadow(2px 2px 2px var(--color-disabled));
	}
	/* OVERRIDE */
	.dropdown-menu-right {
		text-align: right;
	}
}