@keyframes fadeInDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}


#dashboard {
	position			: sticky;
	position			: -webkit-sticky;
	width				: 100%;
	background			: var(--color-background);
	height				: 40px;
	top					: 0px;
	z-index				: 10000;
}

#dashboard.scrolled {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 10px 0px;
}


.dashboard_wrapper {
	position			: absolute;
	width				: 100%;
	pointer-events		: none;
	max-height			: 42px;
	overflow-y			: auto;
}


.dashboard_wrapper::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 0px;
  height: 0px;
}

.dashboard_wrapper::-webkit-scrollbar-thumb {
  border-radius: 0px;
  border: 0px solid var(--color-background);
  background-color: rgba(0, 0, 0, .3);
}


.dashboard_space {
	width			: 10px;
	float			: right;
}

.dashboard_space::before{
   content: ".";
   visibility: hidden;
}



p.dashboard_circle {
	color			: var(--color-text);
	cursor			: pointer;
}


p.dashboard_circle, p.dashboard_circlealert {
	box-sizing		: initial;
	width			: 1.8em;
	height			: 1.8em;
	background		: var(--color-background);
	border			: 1px solid var(--color-text);
	border-radius	: 50%;    
	text-align		: center;
	line-height		: 1.8em;
	box-sizing		: content-box; 
	transition		: 0.5s;
}


p.dashboard_circlealert {
	color			: var(--color-text-link);
}

p.dashboard_circle:hover, p.dashboard_circlealert:hover {
	background		: var(--color-button-hover);
	text-decoration	: none;
	transition		: 0.5s;
}

a.dashboard_circle:link, a.dashboard_circle:visited, a.dashboard_circle:active, a.dashboard_circle:focus {
	text-decoration	: none;
	color			: var(--color-text);
}

a.dashboard_circlealert:link, a.dashboard_circlealert:visited, a.dashboard_circlealert:active, a.dashboard_circlealert:focus {
	text-decoration	: none;
	color			: var(--color-text-link);
}



.dashboard_button{
	pointer-events	: auto;
	float			: right;
}

.dashboard_badge {
	border			: 1px solid var(--color-background);
	border-radius	: 12px;
	box-shadow		: 1px 1px 1px var(--color-text);
	color			: var(--color-background);
	float			: right;
	position		: relative;
	margin-top		: -15px;
	padding			: 1px;
	font-size		: 9px;
	font-weight		: bold;
	text-align		: center;
	height			: 12px;
	min-width		: 12px;
	pointer-events	: none;
}


.dashboard_badge_red {
	background:			radial-gradient( 5px -9px, circle, var(--color-background) 8%, var(--color-text-link) 13px);
	background:			-moz-radial-gradient( 5px -9px, circle, var(--color-background) 8%, var(--color-text-link) 13px );
	background:			-ms-radial-gradient( 5px -9px, circle, var(--color-background) 8%, var(--color-text-link) 13px );
	background:			-o-radial-gradient( 5px -9px, circle, var(--color-background) 8%, var(--color-text-link) 13px );
	background:			-webkit-radial-gradient( 5px -9px, circle, var(--color-background) 8%, var(--color-text-link) 13px );
	background-color:	var(--color-text-link);
}


.dashboard_badge_black {
	background:			radial-gradient( 5px -9px, circle, var(--color-background) 8%, var(--color-text) 13px );
	background:			-moz-radial-gradient( 5px -9px, circle, var(--color-background) 8%, var(--color-text) 13px );
	background:			-ms-radial-gradient( 5px -9px, circle, var(--color-background) 8%, var(--color-text) 13px );
	background:			-o-radial-gradient( 5px -9px, circle, var(--color-background) 8%, var(--color-text) 13px );
	background:			-webkit-radial-gradient( 5px -9px, circle, var(--color-background) 8%, var(--color-text) 13px );
	background-color:	var(--color-text);
}