.sidebar 
	padding: 0
	height: 100%
	overflow: auto
	vertical-align: top
	display: inline-block
	padding-left: 10px
	background-color: var(--bgdark)

	&-scrolling 
		width: 100%
		position: unset

	&-fixed 
		position: fixed
		bottom: 0px
		width: 50%

		@media (min-width: 768px)
			width: calc(33.33% - 5px)

		@media (min-width: 960px)
			width: calc(25% - 5px)

	&-menu
		li
			font-size: 0.8rem
			padding-top: 8px
			padding-bottom: 8px
			border: 1px solid var(--bgdark)
			padding-left: 20px
			margin: 0
			cursor: pointer

			a
				color: var(--textlinkdark)

			&:hover
				border: 1px solid var(--accent)

				&:before, a
					color: var(--textlink)

	&-content 
		background-color: var(--bgdark)
		border-right: 5px solid var(--accent)
		padding-top: 30px
	
	&-offcanvas 
		@media screen and (max-width: 767px)
			left: -46% !important

	hr 
		border-top: 1px solid var(--accent)

	&-game-info 
		background-color: var(--bgdarker)
		border: 1px solid var(--accent)
		margin-bottom: 1rem

		.sidebar-game-platform 
			position: absolute
			top: 0px
			border: 1px solid black

	&-heading 
		font-weight: bold
		padding-top: 10px
		padding-left: 10px
		margin-top: 0


	&-date 
		color: var(--textlinkdark)
		font-size: 0.7rem


	&-header img 
		float: right