@charset "UTF-8";


@font-face {
	font-family:'Reactor7';
		src:url('../webfonts/Reactor7.eot');
		src:url('../webfonts/Reactor7.eot?#iefix') format('embedded-opentype'),
				url('../webfonts/Reactor7.woff') format('woff'),
				url('../webfonts/Reactor7.ttf') format('truetype'),
				url('../webfonts/Reactor7.svg#Reactor7') format('svg');
	font-weight:normal;
	font-style:normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family:'Reactor7';
		src: url('../webfonts/Reactor7.svg') format('svg');
		font-weight:normal;
		font-style:normal;
	}
}

/* Wishing to overwrite colors for dark theme 
* var(--bs-body-bg-rgb)
* var(--bs-primary)
* var(--bs-primary)
* var(--bs-danger)
* var(--bs-link-color)
* var(--bs-link-hover-color)
*/

:root{
	--bs-body-font-family:  Arial, sans-serif;
	--font-family-headings:  Reactor7, Arial, sans-serif;
	--font-family-brand:  Reactor7, Arial, serif;
	--font-family-links: Reactor7, Arial, sans-serif;

	--def-border-radius: 0.5rem;
	--bs-btn-border-radius: 0.75rem;
	--sidebar-width: 300px;
	--top-nav-bg-color-rgb: var(--bs-body-bg-rgb);
	--top-nav-bg-opacity: .66;
	--top-nav-notification-bg-color: var(--bs-primary);
	--top-nav-notification-bg-color: var(--bs-danger);
	
	--transition-time: 0.6s;
}

/* BRANDING FONT */
.ff-brand {
	font-family: var(--font-family-brand);
	color:var(--bs-light-text-emphasis);
	
}

nav .brand, nav .brand:hover {
	color: var(--bs-primary);
	font-family: var(--font-family-brand);
	font-size: 2em;
}


nav .brand small{
	color: var(--bs-gray-500);
	font-size: 1rem;
}

[data-bs-theme='dark'] .nav-tabs .nav-link:not(.active) {
		color:var(--nav-link-color);
		background-color:var(--bs-light);
}
[data-bs-theme='dark'] .nav-tabs .nav-link.active {
	color:var(--bs-light);
	border-color:var(--bs-light);
	background-color:var(--nav-link-color);
}

[data-bs-theme='dark'] .nav-tabs {
	border-color:var(--bs-light);
}

[data-bs-theme='dark'] .nav-link {
	color:var(--bs-light);
}
[data-bs-theme='dark'] .nav-link:hover {
	color:var(--nav-link-color);
}

[data-bs-theme='dark'] button:not(:disabled) {
	color: var(--bs-light);
	border-color: var(--bs-light);
	background-color: var(--nav-link-color);
}

[data-bs-theme='dark'] button:not(:disabled):hover {
	color: var(--bs-dark);
	background-color: var(--bs-light);
}
/* SIDEBAR MENU */
#sidebar {
	position: fixed;
	z-index: 1099;
	overflow-x: hidden;
	width: var(--sidebar-width);
	height: 100dvh;
	margin: 0 1rem 0 calc(var(--sidebar-width) * -1);
	padding: 2rem;
	transition: margin var(--transition-time);
	
	
	--nav-link-color: var(--bs-link-color);
	--nav-link-color-hover: var(--bs-link-hover-color);
} 

#sidebar.visible {
	margin-left: 0;
}

#sidebar #sidebar-close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	display: inline;
}

#sidebar .nav-header {
	font-size: calc(var(--bs-body-font-size) * .85);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	opacity: .75;
}
#sidebar .nav-header + .nav {
	margin-top: .75rem;
}

#sidebar .nav {
	flex-direction: column;
	margin-bottom: 2rem
}

#sidebar .nav .nav-item > a.nav-link {
	display: flex;
	align-items: center;
	color: var(--nav-link-color);
	font-family: var(--font-family-links);
	font-size: 1.75rem;
}
#sidebar .nav .nav-item > a.nav-link:hover {
	color: var(--nav-link-color-hover);
}

#sidebar .nav .nav-item > a.nav-link > .nav-link-icon {
	display: none;
}
#sidebar .nav .nav-item > a.nav-link:hover > .nav-link-icon {
	display: block;
	width: 1.0rem;
	text-align: left;
	margin-right: 20px;
}

#main-container {
	width: 100%;
	margin: 0;
	transition: margin var(--transition-time), width var(--transition-time);
}

#main-container > main {
	padding: calc(2rem + 60px) 1rem 2rem 1rem;
}

/* TOP NAVBAR */
#main-container #top-navigation {
	display: flex;
	align-items: center;
	z-index: 1098;
	position: fixed;
	width: 100%;
	padding: 0.25rem auto;
	background-color: rgba( var(--top-nav-bg-color-rgb) , var(--top-nav-bg-opacity) );
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: width var(--transition-time);
}

#main-container #top-navigation #sidebar-open {
	margin-left: 1rem;
	display: block;
}

#main-container #top-navigation .nav {
	align-items:center;
}

#main-container #top-navigation .nav a.nav-link {
	display: flex;
	align-items: center;
	color: var(--bs-body-color);
	opacity: 0.8;
	transition: opacity 0.15s ease-in-out;
}

#main-container #top-navigation .nav a.nav-link:hover {
	opacity: 1;
}

#main-container #top-navigation .nav a .icon {
	position: relative;
	font-size: calc(var(--bs-body-font-size) * 1.25);
}

#main-container #top-navigation .nav a .icon + * {
	margin-left: 0.5rem;
}

#main-container #top-navigation .nav a .icon .notification {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	aspect-ratio: 1;
	width: 0.6rem;
	background-color: var(--top-nav-notification-bg-color);
	border-radius: 50%;
}

#main-container #top-navigation .nav a .username {
	display: block;
	max-width: 33dvw;
	overflow: visible;
	font-weight: 700;
}

#main-container #top-navigation .nav a .subtext {
	display: block;
	max-width: 33dvw;
	overflow: visible;
	font-size: calc(var(--bs-body-font-size) * 0.75);
	line-height: 0.95;
}

#main-container #top-navigation #user-dropdown > a .icon {
	font-size: calc(var(--bs-body-font-size) * 2);
}

#main-container #top-navigation #user-dropdown > a .icon + * {
	margin-left: 0.5rem
}

footer {
	padding: 2rem;
}

#members-online {
	position: fixed;
	bottom: 0.125rem;
	right: 0.125rem;
	display: inline-block;
}

/* SIDEBAR VISIBLE */
@media (min-width: 1200px){
	#sidebar {
		margin: 0 1rem 0 0;
	}
	#sidebar #sidebar-close {
		display: none;
	}
	#main-container {
		margin: 0 0 0 var(--sidebar-width);
		width: calc(100% - var(--sidebar-width));
	}
	#main-container #top-navigation {
		width: calc(100% - var(--sidebar-width));
	}
	#main-container #top-navigation #sidebar-open {
		display: none;
	}
}

/* html tags */
body#design3 {
	display:flex;
}

a {
	text-decoration: none;
}

a:not([class]):hover{
	text-decoration: underline;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-headings);
	letter-spacing: -.1rem;
}



.btn {
	box-shadow: 0.075rem 0.10rem 0.45rem -0.20rem var(--bs-btn-bg); 
}
.btn.btn-outline {
	box-shadow: 0.075rem 0.10rem 0.45rem -0.20rem var(--bs-btn-border-color); 
}

.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}

.breadcrumb {
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}

.theme-toggle {
	cursor: pointer;
}
.theme-toggle.toggle-light {
	display: none;
}

[data-bs-theme='dark'] .theme-toggle.toggle-light {
	display: inline-block;
}
.theme-toggle.toggle-dark {
	display: inline-block;
}

[data-bs-theme='dark'] .theme-toggle.toggle-dark {
	display: none;
}

.btn-outline-dark:hover svg {
	color: var(--bs-primary);
}

[data-bs-theme='dark'] .btn-outline-dark {
	color: var(--bs-light);
	border-color: var(--bs-light);
	background-color: var(--nav-link-color);
}

[data-bs-theme='dark'] .btn-outline-dark:hover {
	color: var(--bs-dark);
	background-color: var(--bs-light);
}

[data-bs-theme='dark'] .btn-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-gray-500);
    --bs-btn-hover-border-color: var(--bs-gray-500);
    --bs-btn-focus-shadow-rgb: 66,70,73;
    --bs-btn-active-color: var(--bs-light);
    --bs-btn-active-bg: var(--bs-gray-500);
    --bs-btn-active-border-color: var(--bs-gray-500);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-light);
    --bs-btn-disabled-bg: var(--bs-gray-500);
    --bs-btn-disabled-border-color: var(--bs-gray-500);
}