@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

body {
	font-size: 0.9rem;
	overflow-x: hidden;
	font-family: 'Inter', sans-serif;
}

.badge {
	padding: 0.3em 0.6em;
	margin-bottom: 0.2em;
	font-size: 0.9em;
	font-weight: 400;
}

.navbar-nav .badge {
	padding: 0em;
	margin-bottom: 0em;
	font-weight: 700;
}

.badge.tag {
	padding: 0.6em;
}

h6.badge {
	margin-bottom: 1em;
}

a.tag:hover, .tag a:hover {
	text-decoration: none;
}

.card-header {
	background-color: white;
}

/* === Side navigation */

#side-nav {
	background-color: #fff;
	border-right: 1px solid #FCFCFC;
	position: fixed;
	height: calc(100vh - 48px);
	top: 48px;
	padding-left: 0px;
	padding-right: 0px;
	transition: 0.5s ease transform;
	z-index: 999;
	font-size: 0.9em;
}

@media (min-width: 900px) {
	#side-nav {
		width: max-content;
	}
	#side-nav ul.nav {
		width: max-content;
	}
}

#side-nav ul {
	height: 100%;
}

#side-nav a.nav-link {
	color: #222;
	font-size: 1.1em;
	padding-left: 1.5em;
}

#side-nav li.nav-item {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

#side-nav li.nav-item, #side-nav li.nav-separator {
	border-right: 1px solid #F0F0F0;
}

#side-nav li.nav-item.active {
	background-color: #FCFCFC;
	font-weight: bold;
	border-top: 1px solid #F0F0F0;
	border-bottom: 1px solid #F0F0F0;
	border-right: none;
}

#side-nav .nav-counter {
	font-size: 0.8em;
	padding-left: 0.5em;
}

#side-nav svg {
	height: 20px;
	margin-right: 0.5em;
}


@media (min-width: 992px) {
/* lg breakpoint */

	#side-nav.desktop-hide {
		/* display: none !important; */
		transform: translate3d(-500px, 0, 0);
		position: fixed;  /* takes this out of flow, causes page-pane to move */
	}
	
	.page-pane {
		margin-left: 16.66%;
		transition: 1s ease margin;
	}

}

@media (max-width: 991px) {
	.m-none {
		transform: translate3d(-100vw, 0, 0);
	}
}


/* when the menu is hidden, expand the page to fill */
.desktop-hide + .page-pane {
	flex: 0 0 100%;
	max-width: 100%;
	margin-left: 0px;
}


#side-nav .nav-separator {
	flex-grow: 1;
	border-bottom: 1px solid #FCFCFC;
}

#side-nav li.nav-item.nav-small {
	font-size: 0.9em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}

#side-nav li.nav-item.nav-small svg {
	width: 16px;
	height: 16px;
}

.page-pane {
	margin-top: 48px;
}

.border-top {
	border-top: 1px solid #F0F0F0 !important;
}

.border-left {
	border-left: 1px solid #F0F0F0 !important;
}

.navbar-dark {
	background-color: #460d6b;   /* fallback */
	background: linear-gradient(20deg, rgba(70,13,107,1) 30%, rgba(136,0,0,1) 100%); 
	border: 0px;
	height: 48px;
}

button.close.remove-tag {
	color: white;
}

.login-form {
	background-color: white;
	padding: 3em 4em 2em 4em;
	border: 1px solid #F0F0F0;
}

.nav-top-right, .nav-top-right a {
	color: white;
}

.nav-top-right svg {
	width: 20px;
	height: 20px;
}