* {
	font-family: 'Inter', sans-serif;
}

body {
	/* background: #ccc; */
}

.navbar-vertical {
	/* background: #222; */
}

.offline {
	filter: grayscale(100%);
	transition: 0.45s;
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.25s;
}

.fade-enter,
.fade-leave-to {
	opacity: 0;
}

@media (min-width: 768px) {
	.navbar-vertical.navbar-expand-lg {
		width: 13rem;
	}
}

@media (min-width: 768px) {
	.navbar-expand-lg.navbar-vertical ~ .navbar,
	.navbar-expand-lg.navbar-vertical ~ .page-wrapper {
		margin-left: 13rem;
	}
}

body.modal-open {
	overflow: hidden;
	padding-right: 16px;
}

.navbar.navbar-vertical.compact ~ .page-wrapper,
.navbar.navbar-vertical.compact ~ .navbar {
	margin-left: 55px !important;
	margin-right: 0 !important;
}

.navbar.navbar-vertical.navbar-right.compact ~ .page-wrapper,
.navbar.navbar-vertical.navbar-right.compact ~ .navbar {
	margin-right: 55px !important;
	margin-left: 0 !important;
}

.page-wrapper,
header {
	transition: margin-left 0.3s ease;
}