.steam-btn-icon{
    background-image : url('../images/steam/main.png');
	border-radius:20px;
	box-shadow:0px 0px 1px rgba(0,0,0,0.75);
}
.steamworkshop-btn-icon{
	width: 40px;
    background-image : url('../images/steam/workshop.jpg');	 
}
.steamicon{
	padding:0;
	margin:0;
	background-image:url('../images/steam/main.png');
	background-position:center center;
	background-repeat:no-repeat;
	background-size:32px 32px;
}
.fa-steam{
	background-color:rgba(255,255,255,0.9) !important;
	color:#223349 !important;
	border-radius:100%;
	box-shadow:
		inset 1px 1px 1px rgba(0,0,0,0.9),
		inset -1px -1px 1px rgba(0,0,0,0.9),
		0.5px 0.5px 1px rgba(255,255,255,0.5);
}
/*
.btn-steam{
	background-color:#1b2838 !important;	
}
*/
nav .account-data{
	min-width:256px;
}
.steam-badge{
	display:flex;
	width:100%;
	overflow:hidden;
	min-height:74px;
	/*min-width:15em;*/
	position:relative;
	margin:0px;
	padding:0px;
	color:white;
	background-color:#1b2838;
	background-image:url('../images/steam/main.png');
	background-position:bottom right;
	background-size:48px 48px;
	background-repeat:no-repeat;
	text-shadow:
		1px 0px 0px rgba(0,0,0,0.75),
		0px 1px 1px rgba(0,0,0,0.75),
		-1px 0px 0px rgba(0,0,0,0.75),
		0px -1px 1px rgba(0,0,0,0.75);
}
.steam-badge .steam-badge-body{
	display:block;
	clear:both;
	padding:5px;
}
.steam-badge a{
	color:lightgrey;
}
.steam-badge:after{
	content:" ";
	position:absolute;
	clear:both;
}
.steam-badge .steam-since{
	display:inline-block;
	position:absolute;
	bottom:0;
	right:0;
	padding:0px 1px;
	font-size:8px;
}
.steam-badge .steam-status{
	display:inline-block;
	position:absolute;
	top:0;
	right:0;
	padding:0px 1px;
	font-size:10px;
}
.steam-badge .steam-status *{
	display:inline-block;
}
.steam-badge .steam-status div{
	padding:1px 2px;
	border-bottom-left-radius:100%;
}
.steam-badge .steam-name{
	padding:3px;
	display:block;
	font-size:18px;
}
.steam-badge .steam-id{
	display:block;
	font-size:10px;
}
.steam-badge .steam-avatar{
	width:64px;
	margin:5px;
	overflow:hidden;
	display:inline-block;
	float:left;
}
.steam-badge.small-badge{
	max-width:250px;
}
.steam-badge.large-badge{
	padding-bottom:15px;
}
.steam-badge .steam-info{
	width:calc(100% - 94px);
	overflow:hidden;
	display:inline-block;
	margin:5px;
	float:left;
}

.steam-badge .steam-badge-overlay{
	-webkit-transition: left 0.5s; /* Safari */
	transition: left 0.5s;
	width:100%;
	height:100%;
	position:absolute;
	margin:0;
	padding:5px;
	top:0;
	left:100%;
	background-color:rgba(0,0,0,0.75);
	font-size:10px;
}
.steam-badge:hover .steam-badge-overlay{
	left:72px;
}
.steam-badge .steam-badge-overlay a{
	font-size:16px;
}

/* Steam Bootstrap Friendly Button */
/*
<a href="./?login" title="Login with Steam™" class="btn btn-steam text-light me-lg-2 btn-sm">
	<div class="text mx-1">Login With Steam</div>
	<div class="icon">
		<i class="bi bi-steam"></i>
	</div>
</a>
*/
.btn-steam {
position:relative;
/*display:flex;*/
  /*display: block;*/
  background-color: #1b2838 !important;
  width: 225px;
  /*height:39px;*/
  height:auto !important;
  max-height:auto !important;
  min-height:auto !important;
  overflow:hidden;
  color: #fff;
  padding: 0.375rem 0.75rem;
  /*line-height: 30px;*/
  /*
  line-height: 50px;
  margin: auto;
  color: #fff;
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  border-radius: 5px;
  */
}
.btn-steam.btn-sm,
.nav .btn-steam.btn-sm{
  width: 195px;
  /*height:39px;*/
 /* line-height: 30px;*/
  /*line-height: 39px;*/
  padding: 0.25rem 0.5rem;
}
.btn-steam.btn-block{
	width:auto;
	display:block;
}
.nav-link.btn-steam.btn-sm{
	padding: 0.5rem 1rem;
}
.btn-steam.btn-xs {
  min-height:24px;
  line-height: 24px;
}

.btn-steam .text,
.btn-steam .icon {
  display: block;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  padding:0;
}

.btn-steam .text {
	
  font-family: 'Exo 2', sans-serif;
  /*font-weight: bold;*/
  letter-spacing: 0.025em;
  width: calc(75% );
  /*font-size: 14px;*/
  /*text-transform: uppercase;*/
  left: 0;
  top:1px;
  position: relative;
  display:block;
  
  -webkit-transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
  transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}
.btn-steam.btn-sm .text{
}
.btn-steam .icon {
	display: inline-block !important;
  width: calc(25%);
  position: absolute;
  right: 0;
  -webkit-transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
  transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
  /*background:#212f43;*/  
}
.btn-steam.btn-sm .icon{
}
.btn-steam .icon i {
  font-size: 28px !important;
  /*line-height: 50px;*/
  -webkit-transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4), height 0.25s ease;
  transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4), height 0.25s ease;
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  
  background-color: rgba( 0, 0, 0, 0.2 ) !important;
    border-radius: 3px !important;
    border: 1px solid #000;
    box-shadow: 1px 1px 0 0 rgb(91 132 181 / 20%);
    color: #C6D4DF !important;
    padding: 3px;
    outline: none;
}
.btn-steam.btn-sm:not(.nav-link) .icon i{
  font-size: 20px;
}

.btn-steam .text:after {
  content: '';
  background-color: #212f43;
  width: 2px;
  height: 70%;
  position: absolute;
  top: 15%;
  right: -2px;
}

.btn-steam.success .text,
.btn-steam:hover .text {
  left: -72%;
  opacity: 0;
}

.btn-steam.success .icon,
.btn-steam:hover .icon {
  width: 100%;
  top:0;
}

.btn-steam.btn-sm.success .icon i,
.btn-steam.btn-sm:hover .icon i {
}
.btn-steam.success .icon i,
.btn-steam:hover .icon i {
}
@media screen and (max-width: 992px) {
	.navbar .btn-steam, 
	.navbar .btn-steam.btn-sm{display:block !important; width: auto !important;}	
}


.btn-steam-icon{
	background-color:#212f43;
    background-image : url('../images/steam/main.png');
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	width:36px;
	height:36px;
	margin:0 auto;
	border-radius:20px;
	box-shadow:0px 0px 1px #212f43;
}
.btn-steamworkshop-icon{
	width: 40px;
    background-image : url('../images/steam/workshop.jpg');	 
}
.nav-avatar{
	height:24px;
	width:24px;
	margin:-6px 5px -6px 0px;
}