html, body {
	margin: 0;
	height: 100%;
}
body {
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight: 600;
}

@media (max-width: 576px) {
	body {
		font-size: 0.8rem;
	}
}

.dark-mode {
	color: #c4ccd1;
}

h1, h2, h3, h4, h5, h6 {
	color: #646a6e;
	margin-bottom: 0;
}
.dark-mode h1, .dark-mode h2, .dark-mode h3,
.dark-mode h4, .dark-mode h5, .dark-mode h6,
.dark-mode th, .dark-mode td {
	color: #91999e;
}

.dark-mode hr {
	background-color: rgb(102, 102, 102)
}

.dark-mode .text-muted {
	color: #b0bac0 !important;
}

.content-block {
	transition: background-color .2s;
}

.dark-mode .content-block,
.dark-mode .inventory-item{
	background-color: rgb(51, 57, 66);
}

.dark-mode .progress,
.dark-mode .black-background {
	background-color: #26282a !important;
}

.dark-mode .vm--modal {
	background-color: rgb(51, 57, 66) !important;
}

.dark-mode.popover {
	background-color: rgb(240, 241, 243) !important;
}

/* .dark-mode .alert-danger {
  color: rgb(255, 111, 111) !important;
  border: 1px solid rgba(197, 125, 125, 0.452) !important;
  background-color: rgba(163, 64, 64, 0.356) !important;
}

.dark-mode .alert-success {
  color: rgb(111, 255, 123) !important;
  border: 1px solid rgba(125, 160, 119, 0.198) !important;
  background-color: rgba(76, 163, 64, 0.356) !important;
} */


p {
	margin: 0;
}

* {
	background-color: unset;
}

img {
  image-rendering: pixelated;
}
.no-pixel {
	image-rendering: auto !important;
}

.content-container {
	margin: 15px 0px 4px 0px;
	
	/* container-fluid */
	padding-right: 15px;
	padding-left: 15px;

}


@media (min-width: 768px) {
	.content-container {
		margin: 35px 20px 20px 20px;
	}
}


.content-block {
	border-radius: .25rem;
	background-color: white;
	min-height: 3rem;
	border-top: 4px solid #afafaf;
	padding: 1rem;
}
@media (max-width: 576px) {
	.content-block{
		padding: .5rem;
	}
}

.content-block.locked {
  background-color: rgb(68, 68, 68);
  border-top: 4px solid #953d3d !important;
  color: rgb(255, 255, 255) !important;
}

.dark-mode .content-block.locked {
	background-color: rgb(46, 32, 32);
	color: #737980 !important;

}

.content-block-top.expanded {
  margin-bottom: 0;
  border-bottom-width: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 0.5rem;
}

.content-block-bottom {
  border-top-width: 0;
  margin-top: 0;
  padding-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.clickable {
	cursor: pointer;
	background-color: white;
  transition: background-color 0.1s;
}

.clickable:hover,
.inventory-item:hover {
  cursor: pointer;
  background-color: rgb(206, 233, 255);
}

.dark-mode .clickable:hover,
.dark-mode .inventory-item:hover {
	background-color: rgb(79, 83, 98);;
}


.danger-bubble,
.warning-bubble,
.success-bubble,
.secondary-bubble,
.orange-bubble,
.primary-bubble {
  padding: 0.1rem 0.35rem;
	border-radius: 8px;
	color: white;
}

.danger-bubble {
  background-color: rgb(179, 43, 43);
}
.warning-bubble {
  background-color: rgb(241, 181, 0);
}
.success-bubble {
  background-color: rgb(5, 134, 11);
}
.secondary-bubble {
  background-color: rgb(133, 133, 133);
}
.orange-bubble {
  background-color: rgb(223, 89, 0);
}
.primary-bubble {
  background-color: #007bff;
}
.popover {
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.459);
}

.overlay-div {
	width: 32px;
	height: 32px;
	position: relative;
}
.overlay-div * {
	z-index: 1;
}
.overlay-div img,
.overlay-div div {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.popover {
	max-width: 600px !important;
}


.inventory-item,
.fake-inventory-item {
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  width: 64px;
  border-radius: 4px;
  padding-bottom: 0.25rem;
  margin: 0.5rem;
}

.dark-mode .inventory-item {
	color: rgb(163, 164, 179);
}

.inventory-item img,
.fake-inventory-item div {
	width: 64px;
	height: 64px;
}
.fake-inventory-item {
	background-color: #737980;
	opacity: .5;
}
.dark-mode .fake-inventory-item {
	background-color: #232529;
}

@media (max-width: 576px) {
	.inventory-item,
	.fake-inventory-item {
		width: 42px;
		margin: 0.25rem;
	}
	
	.inventory-item img,
	.fake-inventory-item div {
		width: 32px;
		height: 32px;
	}
}

.mx--0,
.mx--1,
.mx--2 {
	margin-top: -8px;
	margin-bottom: -4px;
}

.mx--1 {
	margin-left: -.15rem;
	margin-right: -.15rem;
}

.mx--2{
	margin-left: -.3rem;
	margin-right: -.3rem;
}

@media (min-width: 1900px) {
	.col-xxl-2 {
		flex: 0 0 16.666667% !important;
		max-width: 16.666667% !important;
	}
}

.black-background {
  background-color: rgb(61, 61, 61) !important;
}

/* Sticks elements to the top of the page as you scroll down and renders them over other elements */
.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 9;
}

/* I've lost control of my life */
.shitposting {
	font-family: "Comic Sans MS", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}