.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
		overflow: hidden

		p
			margin: 0

		.sidebar-game-platform
		    position: absolute
		    display: inline-block
		    box-shadow: 0px 0px 10px rgba(0,0,0,0.9)
		    -webkit-transform: rotate(-45deg)
		    -moz-transform: rotate(-45deg)
		    -o-transform: rotate(-45deg)
		    -ms-transform: rotate(-45deg)
		    top: -50px
		    right: 20px
		    width: 25px

		    @media (min-width: 768px)
			    top: -60px
			    right: 35px
			    width: 40px

	&-header img
		float: right

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


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