/* TAB NAVIGATOR */
.tabNavigator
{
	height:90px;
	line-height:90px;
	outline:none;
	position:relative;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

.tabNavigator .divTabNavigatorScroller
{
	height:100%;
	position:relative;
	overflow-x:scroll;
	overflow-y:hidden;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.tabNavigator .divTabNavigatorScroller::-webkit-scrollbar
{
    display: none;
	background:transparent;
	height:0px;
	width:0px;
}

.tabNavigator .divTabNavigatorBackground
{
	background-color:#292a2f;
	border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
	height:calc(100% - 30px);
	left:0px;
	position:absolute;
	top:15px;
	width:100%;
}

.tabNavigator .divSelectedIndicator
{
	background-color:#37383d;
	border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
	bottom:10px;
	left:20px;
	position:absolute;
	top:10px;
	transition:left 0.25s, width 0.25s;
	width:0px;
}

.tabNavigator .divTabNavigatorItems
{
	padding:0px 20px;
	position:relative;
	white-space:nowrap;
}

.tabNavigator .divTabNavigatorItem
{
    cursor:pointer;
	display:inline-block;
	font-size:18px;
    padding:0px 20px;
	position:relative;
	transition:color 0.25s;
}

.tabNavigator .divTabNavigatorItem.authenticated
{
	display:none;
}

.signedIn .tabNavigator .divTabNavigatorItem.authenticated
{
	display:inline-block;
}

.tabNavigator .divTabNavigatorItem:last-child
{
	margin-right:20px;
}

.tabNavigator.showOverflow .divTabNavigatorItem:last-child
{
	margin-right:50px;
}

.tabNavigator .divTabNavigatorItem:hover, .tabNavigator .divTabNavigatorItem.selected
{
	color:#ffffff;
}

.tabNavigator .imgTabNavigatorItemIcon
{
	float:left;
	height:20px;
	margin:35px 10px 0px 0px;
	opacity:0.4;
	transition:opacity 0.25s;
	width:20px;
}

.tabNavigator .divTabNavigatorItem:hover .imgTabNavigatorItemIcon, .tabNavigator .divTabNavigatorItem.selected .imgTabNavigatorItemIcon
{
    opacity:1;
	filter:drop-shadow(0px 0px 2px #01eff9);
}

/* TAB NAVIGATOR LIST */
.tabNavigator .divTabNavigatorOverlay
{
	display:none;
	height:100%;
	left:0px;
	position:fixed;
	top:0px;
	width:100%;
}

.tabNavigator.openList .divTabNavigatorOverlay
{
	display:block;
	z-index:4;
}

.tabNavigator .btnListItems
{
	background-color:#37383d;
	border-radius:10px;
	box-shadow:inset 0px -20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px 20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
	cursor:pointer;
	display:none;
	font-size:30px;
	height:60px;
	line-height:70px;
	position:absolute;
	right:0px;
	text-align:center;
	top:15px;
	transform:rotate(180deg);
	transition:color 0.25s, text-shadow 0.25s;
	width:40px;
}

.tabNavigator.showOverflow .btnListItems
{
	display:block;
}

.tabNavigator .btnListItems:hover
{
	color:#ffffff;
	text-shadow:0px 0px 5px #01eff9;
}

.tabNavigator.openList .btnListItems
{
	z-index:4;
}

.tabNavigator .divTabNavigatorListItems
{
	background-color:#292a2f;
	border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
	cursor:pointer;
	display:none;
	overflow:hidden;
	padding:10px 0px;
	position:absolute;
	right:0px;
	top:75px;
	z-index:4;
}

.tabNavigator.openList .divTabNavigatorListItems
{
	display:block;
}

.tabNavigator .divTabNavigatorListItem
{
	cursor:pointer;
	height:30px;
	line-height:30px;
	padding:0px 20px;
	transition:color 0.25s, text-shadow 0.25s;
}

.tabNavigator .divTabNavigatorListItem:hover, .tabNavigator .divTabNavigatorListItem.selected
{
	color:#ffffff;
	text-shadow:0px 0px 5px #01eff9;
}

.tabNavigator .imgTabNavigatorListItemIcon
{
	float:left;
	height:16px;
	margin:5px 10px 0px 0px;
	opacity:0.4;
	transition:opacity 0.25s;
	width:16px;
}

.tabNavigator .divTabNavigatorListItem:hover .imgTabNavigatorListItemIcon, .tabNavigator .divTabNavigatorListItem.selected .imgTabNavigatorListItemIcon
{
    opacity:1;
	filter:drop-shadow(0px 0px 2px #01eff9);
}

/* ARROW BUTTONS */
.tabNavigator .btnLeft
{
	border-bottom:15px solid transparent;
	border-right:8px solid #292a2f;
	border-top:15px solid transparent;
	cursor:pointer;
	display:none;
	height:0px;
	left:-28px;
	margin:0px 10px;
	position:absolute;
	top:30px;
	transition:border 0.25s;
	width:0px;
}

.tabNavigator .btnLeft:hover, .tabNavigator .btnLeft:focus
{
	border-right:8px solid #888b90;
}

.tabNavigator .btnRight
{
	border-bottom:15px solid transparent;
	border-left:8px solid #292a2f;
	border-top:15px solid transparent;
	cursor:pointer;
	display:none;
	height:0px;
	margin:0px 10px;
	position:absolute;
	right:-28px;
	top:30px;
	transition:border 0.25s;
	width:0px;
}

.tabNavigator .btnRight:hover, .tabNavigator .btnRight:focus
{
	border-left:8px solid #888b90;
}

.tabNavigator.showArrows .btnLeft, .tabNavigator.showArrows .btnRight
{
	display:block;
}

/* MEDIA QUERIES */
@media (max-width: 800px)
{
	.tabNavigator
	{
		height:80px;
		line-height:80px;
	}

	.tabNavigator .divTabNavigatorItems
	{
		padding:0px 15px;
	}

	.tabNavigator .divTabNavigatorItem
	{
		font-size:16px;
		padding:0px 12px;
	}

	.tabNavigator .imgTabNavigatorItemIcon
	{
		margin:28px 5px 0px 0px;
	}

	/* TAB NAVIGATOR LIST */
	.tabNavigator .btnListItems
	{
		height:50px;
		line-height:60px;
		width:32px;
	}

	.tabNavigator .divTabNavigatorListItems
	{
		top:65px;
	}

	/* ARROW BUTTONS */
	.tabNavigator.showArrows .btnLeft, .tabNavigator.showArrows .btnRight
	{
		display:none;
	}
}

@media (max-width: 600px)
{
	.tabNavigator
	{
		height:70px;
		line-height:70px;
	}

	.tabNavigator .divTabNavigatorItems
	{
		padding:0px 10px;
	}

	.tabNavigator .divTabNavigatorItem
	{
		font-size:12px;
		padding:0px 12px;
	}

	.tabNavigator .imgTabNavigatorItemIcon
	{
		height:16px;
		margin:26px 5px 0px 0px;
		width:16px;
	}

	/* TAB NAVIGATOR LIST */
	.tabNavigator .btnListItems
	{
		height:40px;
		line-height:50px;
		width:30px;
	}

	.tabNavigator .divTabNavigatorListItems
	{
		top:60px;
	}
}