:root {
  --bs-empty-color: #ebebeb;
  --bs-fill-1:#59D298;
  --bs-fill-2:#f5e5af;
  --bs-fill-3:orange;
  --bs-fill-4:#991818;
  --bs-fill-5:#991818;
}

@media ( prefers-color-scheme: dark ) {
	body, .container, .page-footer, .page-content, .DataList .Foot, .DataList .Item, .DataList.Activities .CommentForm, .PanelInfo .Heading, .PanelInfo a, .list-group-item, .Message, .Note.Closed, .NumberedPager > a, .NumberedPager > div, .NumberedPager > span, .pagination > li > a, .pagination > li > span, .Item-BodyWrap, .CategoryBox, .CategoryGroup, .DataTableWrap, .Empty, .MessageForm, .MessageList .Item, .NoResults, .panel, .CategoryBox .MorePager, .MessageForm .Buttons, .panel-footer, .Reactions, .InformMessage, .popover 
	{
		background-color: #121212;
		color: rgba(255,255,255,.6);
	}

	.Quote {
		background-color: #333; 
		border-left: #000;
		border-bottom: #000;
	}


	.ReactButton, .ReactButton .Quote, .Reactions {
		color: #ebebeb;
		background-color: #121212;
		border: 1px solid #333;
		border-bottom: 1px solid #333;
		box-shadow: 0px 1px 1px #000;
		background-color: #1A1A1A;
	}

	.ReactButton:hover {
		background-color: #333;
		color: rgba(255,255,255,.6);
		background-color: #333;
	}

	.DataList .Foot, .DataList .Item, .DataList.Activities .CommentForm, .PanelInfo .Heading, .PanelInfo a, .list-group-item {
		border: 1px solid #333;
	}

	.tc.Category, .tc.PostInfo {
		border-right: 1px solid #333;
	}

	.tc.LastReply {
		border-left: 1px solid #333;
	}

	.InputBox, .MultiComplete, .TextBox, .form-control, .token-input-list, select {
		background-color: #121212;
		border: 1px solid #333;
		color: rgba(255,255,255,.6);
	}

	.well {
		background-color: #1A1A1A;
		color: #ebebeb;
		border: 1px solid #121212;
	}

	.search-form {
		background-color: #1A1A1A;
	}

	.CategoryBox .H, .CategoryGroup .H, .MessageList .Item-Header, .MessageList.Conversation .Meta, .panel-default>.panel-heading, .InputBox, .MultiComplete, .TextBox, .form-control, .token-input-list, select {
		border-color: #333;
	}

	.CategoryBox, .CategoryGroup, .DataTableWrap, .Empty, .MessageForm, .MessageList .Item, .NoResults, .panel-default {
		border-color: #333;
	}

	.CategoryBox .MorePager, .MessageForm .Buttons, .panel-footer {
		border-color: #333;
	}

	.Note.Closed {
		background-color: #222 !important;
	}

	h1, h2, h3, h4, h5, h6, .cat-name, .panel-default>.panel-heading, .MessageList .Item-Header, .MessageList.Conversation .Meta, .CategoryBox .H, .CategoryGroup .H {
		color: rgba(255,255,255,.87) !important;
	}

	.navbar-collapse, .navbar-header, .navbar-brand {
		background-color: #161d27 !important;
	}

	.InformMessage, .popover {
		background-color: #222;
	}

	.DismissMessage .Dismiss, .close, .token-input-delete-token, a.Close, a.Delete {
		color: #fff;
		text-shadow: 0 1px 0 #000;
	}

	.DismissMessage .Dismiss:focus, .DismissMessage .Dismiss:hover, .close:focus, .close:hover, .token-input-delete-token:focus, .token-input-delete-token:hover, a.Close:focus, a.Close:hover, a.Delete:focus, a.Delete:hover {
		color: #fff;
	}

	.Item .Title, .Item .Title a {
		color: rgba( 255, 255, 255, .87 );
	}

	#return-top {
		background-color: #222 !important;
	}

	.pagination>li>a, .pagination>li>span, .NumberedPager>a, .NumberedPager>span, .NumberedPager>div {
		border-color: #333;
	}

	.Count {
		color: rgba( 255, 255, 255, .87 );
	}

	.ReactLabel {
		color: rgba( 255, 255, 255, .6 );
	}

	blockquote, .Blockquote, blockquote.Quote {
		/*border-bottom: 1px solid #000;*/
		border-bottom: 0;
		border-left: 3px solid rgba( 255, 255, 255, .1 );
		background-color: rgba( 255, 255, 255, .02 );
		padding: 1rem;
	}

	.FlyoutMenu, .MenuItems, .ac_results, .atwho-view, .dropdown-menu, .token-input-dropdown {
		background-color: #222;
	}

	.MenuItems li>a, .MenuItems>a, .ac_results li, .ac_results>p, .atwho-view li, .dropdown-menu>li>a, .token-input-dropdown li, .token-input-dropdown>p {
		color: rgba(255,255,255,.6);
	}

	.nav a:hover {
		background-color: #222;
	}

	a, a:visited, a:active {
		color: #82AFEB;
	}

	.Note.Closed a, .Note.Closed a:active  {
		color: #82AFEB !important;
	}

	img {
		opacity: .9;
		transition: opacity .5s ease-in-out;
	}

	img:hover {
		opacity: 1;
	}

	.Body {
		background-color: #121212;
	}

	.Activity:hover {
		background-color: #121212 !important;
	}

	.ReactSprite {
		filter: invert(100%);
	}

	.NumberedPager .Highlight {
		border: 1px solid #333;
	}
}

/* BS Meter */ 
.bs-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: var(--background-color);
}

.meter {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}

.meter-1 {
  background-image: conic-gradient(var(--bs-fill-1) 90%, var(--bs-empty-color) 0);
}
.meter-2 {
  background-image: conic-gradient(var(--bs-fill-2) 75%, var(--bs-empty-color) 0);
}
.meter-3 {
  background-image: conic-gradient(var(--bs-fill-3) 50%, var(--bs-empty-color) 0);
}
.meter-4 {
  background-image: conic-gradient(var(--bs-fill-4) 25%, var(--bs-empty-color) 0);
}
.meter-5 {
  background-image: conic-gradient(var(--bs-fill-5) 1%, var(--bs-empty-color) 0);
}

.meter .inside {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 75%;
  background: var(--background-color);
  border-radius: 50%;
  font-size: 2.5em;
  color: rgba(255, 255, 255, 0.75);
}