body {
  padding: 0px;
  margin: 0px;
  color: white;
  /* background: #31363a; */
  font: 16px 'Radiance', "Lucida Grande", sans-serif;
}


*, *:after, *:before{
	box-sizing: border-box;
}


a {
  color: #00B7FF;
}


h1{
	font-family: 'Reaver';
}

.auto-scale{
	width: 100%;
	height: 100%;
	position: absolute;
}

.content{
	width: 1920px;
	height: 1080px;
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	overflow: hidden;

	transform: translate(-50%, -40%);
}


.flex{
	display: flex;
}


.tooltips{
	width: 1920px;
	height: 1080px;
	position: absolute;
	z-index: 206;
	pointer-events: none;
}

.tooltip{
	position: absolute;
	left: 880px;
	top: 540px;
	opacity: 0;
	transition: 0.2s opacity ease-out;
}

.tooltip.open{
	opacity: 1;
}



.tooltip_arrow{
	position: absolute;
	width: 25px;
	height: 29px;
	left: -25px;
	bottom: 80px;
	background: url('../images/dota/tooltip_arrow_left_blue.png') no-repeat;
}

.tooltip_up .tooltip_arrow{
	bottom: auto;
	top: -27px;
	left: -15px;
	transform: rotateZ(90deg);
}

.tooltip_content{
	transform: translateX(-50%);
}

.screenshot{
	width: 1920px;
	height: 1080px;
	position: absolute;
	z-index: 1;
	pointer-events: none;
}





/*TOP HUD*/

.top_hud{
	position: absolute;
	top: 0px;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;

	width: 1010px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
}

.top_hud.hidden{
	display: none;
}

.clock{
	width: 205px;
	/*border: 1px solid yellow;*/
}

.team_radiant, .team_dire{
	display: flex;
}

.top_hud_hero{
	cursor: pointer;
	height: 40px;
	width: 60px;
	margin: 0px 1px;
	transform-origin: center center;
	position: relative;
	transition: 0.05s background ease-out;
	/* box-shadow: 3px 0px 20px #8100ff; */
}

.top_hud_hero:hover{
	background: rgba(255,255,255,0.3);
	transition: 0.1s background ease-out;
}

.top_hud_hero:after{
	pointer-events: none;
	content: 'View hero details';
	position: absolute;
	left: -50px;
	text-align: center;
	width: 140px;

	bottom: 0px;
	opacity: 0;

	color: white;
	background: rgba(0,0,0,0.5);
	border-radius: 3px;
	padding: 2px 5px;

	

	transition: 0.2s bottom ease-out 0.1s, 0.1s opacity ease-out 0.1s;
}

.top_hud_hero:hover:after{
	opacity: 1;
	bottom: -35px;
}

.hero_card_active .top_hud_hero:after{
	opacity: 0;
}

.team_radiant .top_hud_hero, .team_dire .top_hud_hero:after {
	transform: skew( 9deg );
}

.team_dire .top_hud_hero, .team_radiant .top_hud_hero:after {
	transform: skew( -9deg );
}



/*HERO CARD*/

.hero_card{
	position: absolute;
	opacity: 1;
	left: 575px;
	top: -300px;
	z-index: 5;

	transform: translateX(-50%);

	transition: top 0.25s ease-out, left 0.25s ease-out;
}

/*.hero_card.open{

}*/

.hero_card_content{
	background: #141d2bee;
	border: 2px solid black;
	padding: 10px;
	box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
}

.close_hero_card{
	position: absolute;
	top: 11px;
	right: 17px;
	cursor: pointer;
}

.close_hero_card:hover{
	filter: brightness(1.2);
}

.hero_video {
	margin: 0px -19px;
	height: 165px;
	width: 165px;
	position: relative;
}

.hero_video video{
	width: 165px;
	transition: opacity 0.2s ease-out;
	transform: scaleX(0.75);
}

.hero_card .hero_title{
	font-family: 'Reaver';
	font-size: 30px;
	font-weight: bold;
	/*justify-content: center;*/
	align-items: center;
	margin-top: 10px;
}

.hero_card .hero_title>img{
	margin-right: 10px;
}

.hero_card .hero_roles{
	margin: 10px 0px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 16px;
	display: flex;
	align-items: center;
	color: #A5E0F3;
	opacity: 0.75;
	white-space: nowrap;
}

.hero_card .hero_details{
	margin-left: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.hero_card .hero_spells_and_talents{
	display: flex;
	align-items: center;
}

.hero_card .hero_spells_and_talents>div{
	margin-right: 5px;

}


.hero_card .abilities{
	display: flex;
}

.hero_card .ability_box{
	position: relative;
	margin-right: 5px;
	display: flex;
}

.hero_card .hero_spells_and_talents img{
	cursor: pointer;
	/*opacity: 1;*/
	transition: opacity 0.2s ease-out;
}

.hero_card .hero_spells_and_talents img:hover{
	filter: brightness(1.2);
}


.hero_card .tooltip_arrow{
		transform: rotateZ(90deg) translateY(50%);
		left: 50%;
		right: auto;
		margin: 0 auto;
		bottom: auto;
		top: -25px;
}


.loading_cover:after{
	content: '';
	width: 100%;
	height: 100%;

	background-image: linear-gradient(to bottom, rgb(31 42 55) 0%,rgba(63,76,107,1) 100%);
	background-size: 200% 200%;
	top: 0px;
	left: 0px;
	position: absolute;

	animation: loadingCover 2s infinite; 

}

.hero_video.loading_cover:after{
	width: 75%;
	left: 21px;
}

@keyframes loadingCover {
  0% {background-position: 50% 0%;}
  50% {background-position: 50% 100%;}
  100% {background-position: 50% 0%;}
}


.loading_cover>img{
	opacity: 0;
	transition: opacity 0.2s ease-out;
}


.loading_cover>video{
	opacity: 0;
	transition: opacity 0.2s ease-out;
}



/*ABILITIES AREA*/

.bottom_hud_container{
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 0px;
	width: 100%;
	justify-content: center;
}

.bottom_hud{/*left: 562px;*//* width: 800px; */display: flex;height: 144px;align-items: flex-start;justify-content: center;z-index: 4;}

.bottom_hud .hero{
	width: 154px;
	height: 144px;
	/* border: 1px solid orange; */
}

.bottom_hud .talents{
	cursor: pointer;
	/* margin-left: 4px; */
	width: 74px;
	height: 74px;
	/* border: 1px solid yellow; */
}


.bottom_hud .aghs{
	height: 84px;
	width: 45px;
	/* border: 1px solid yellow; */
	cursor: pointer;
	margin-right: 14px;
}

.bottom_hud .items{
	height: 144px;
	width: 237px;
	/* border: 1px solid orange; */
	padding-top: 5px;
	padding-left: 4px;
	line-height: 0;
	position: relative;
}


.bottom_hud{
	
}

.bottom_hud.hidden{
	display: none;
}

.bottom_hud .abilities{
	/* border: 1px solid red; */
	height: 144px;
	flex: 1;
	display: flex;
	margin-left: -2px;
}

/*.bottom_hud .abilities.abilities_4{
	padding-left: 0px;
	margin-left: -2px;
}

.bottom_hud .abilities.abilities_6{
	padding-left: 0px;
	margin-left: -4px;
	margin-right: -3px;
	padding-right: 0px;
}

.abilities.abilities_5{
	margin-right: 1px;
	margin-left: 0px;
}

.abilities.abilities_5 .ability {
	width: 58px;
	height: 58px;
	margin: 7px 3px;
}

.bottom_hud .abilities.abilities_6 .ability{
	width: 54px;
	height: 54px;
	margin: 7px 3px;
}*/


.bottom_hud .abilities .ability{
	width: 58px;
	height: 58px;
	margin: 7px 3px;
	/* background: rgb(248 54 54 / 68%); */
	cursor: pointer;
	transition: box-shadow 0.25s ease-out;
	box-shadow: 3px 0px 20px #8100ff00;
	position: relative;
}

/* .content:hover .bottom_hud .ability{
	box-shadow: 3px 0px 20px #8d31ff;
	border:1px solid #9f56e7;
		transition box-shadow 0.25s ease-out;
} */

.bottom_hud .abilities .ability:hover{
	background: url('../images/dota/icon_play_video.png') rgba(255,255,255,0.1);
}


.bottom_hud .abilities.AbilityIconSmall{
	margin-left: 0px;

}
.bottom_hud .abilities.AbilityIconSmall .ability{
	width: 54px;
	height: 54px;
	margin: 7px 1.5px;
}


/*ITEM TOOLTIP*/

.item_tooltip{
	position: absolute;
	left: 880px;
	top: 540px;
	opacity: 0;
	transition: 0.2s opacity ease-out;
}

.item_tooltip.open{
	opacity: 1;
}


.item_tooltip_box{
	width: 400px;
	border: 2px solid #000101;
	background: url('../images/dota/ability_tooltip_psd.png') no-repeat;
	background-color: #0e1213f0;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}

.item_heading{
	background: #202a2f;
	padding: 8px 10px;
	display: flex;
	align-items: center;
}

.ItemIcon{
	margin-right: 10px;
}

.ItemName{

	font-family: 'Reaver';
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 600;
	text-shadow: 2px 2px 2px black;
	/*border-bottom: 1px solid #576c8626;*/
}

.ItemCost{
	color: #ffcc34;
	font-weight: bold;
	font-size: 21px;
	display:flex;
	align-items: center;
	text-shadow: 2px 2px 0px rgba(0,0,0,0.3);
}

.ItemCost>img{
	margin-top: 4px;
	margin-right: 5px;
}

.ItemLore{
	margin: 10px;
	padding: 10px;
	font-size: 14px;
	font-style: italic;
	color: #5c6e7c;
	background: rgb(0 0 0 / 50%);
}

.item_props{
	margin: 10px;
}

.item_prop{
	display: flex;
	text-shadow: 2px 2px 0px rgba(0,0,0,0.3);
	color: #758191;
	font-size: 18px;
	align-items: center;
	margin-bottom: 2px;
}

.negative.item_prop .prop_value{
	color: #f15454;
}

.item_prop .prop_sumbol{

}

.item_prop .prop_value{
	color: #e1e1e1;
	font-weight: bold;
	margin: 0px 5px;
	padding-bottom: 1px;
	/*line-height: 30px;*/
}

.item_prop .prop_name{
	
}


/*ABILITY TOOLTIP*/



.ability_tooltip_box{
	width: 400px;
	border: 2px solid #000101;
	background: url('../images/dota/ability_tooltip_psd.png') no-repeat;
	background-color: #101212f5;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}


.tooltip_bottom .ability_tooltip_box{
	/* transform: translateY(-120%); */
}



.AbilityTitle{
	background: #202a2f;
	font-family: 'Reaver';
	padding: 8px 20px;
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 600;
	text-shadow: 2px 2px 2px black;
	border-bottom: 1px solid #576c8626;
}


.ability_details {
	color: #576c86;
	font-size: 16px;
	margin: 10px;
	padding: 0px 10px;
	border-bottom: 1px solid #576c866e;
}


.ability_details>div{
	display: flex;
	margin-bottom: 5px;
}

.ability_details>div>div:first-child{
	/*display: flex;*/
	margin-right: 10px;
}

/*types*/



.SPELL_IMMUNITY_ENEMIES_YES, .SPELL_IMMUNITY_ALLIES_YES{
	color: #3fc74e;
}

.SPELL_DISPELLABLE_NO, .SPELL_DISPELLABLE_YES_STRONG{
	color: red;
}

.DAMAGE_TYPE_PURE{
	color: #d8af54;
}

.DAMAGE_TYPE_MAGICAL{
	color: #5c94d2;
}
.DAMAGE_TYPE_PHYSICAL{
	color: #af3029;
}

.ability_desc{
	color: #99afcb;
	margin: 10px;
	text-shadow: 2px 2px 2px rgb(0 0 0 / 31%);
	font-size: 16px;
	line-height: 1.5;
	padding: 10px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}


.ability_stats{
	color: #576c86;
	margin: 10px;
	padding: 10px;
	padding-bottom: 0px;
	/*border-bottom: 1px solid #576c866e;*/
}


.ability_stats>div{
	/* display: flex; */
	margin-bottom: 6px;
	/* align-items: flex-end; */
	vertical-align: middle;
}



.ability_stats>div>div:first-child{
	margin-right: 10px;
	/* max-width: 220px; */
	display: inline-block;
	/* overflow: hidden; */
	/* white-space: nowrap; */
	text-overflow: ellipsis;
}


.ability_stats>div>div:last-child{
	color: #7b828d;
	display: inline-block;
}

.ability_stats>div>div:last-child>span{
	color: #576c86;
	font-weight: normal;
	margin: 0px 2px;
}



.ability_cd_and_mana{
	display: flex;
	margin-bottom: 15px;
}


.ability_cd_and_mana>div{
	display: flex;
	margin-left: 20px;
	align-items: center;
}

.ability_cd_and_mana>div>img{
	margin-right: 5px;
}

.ability_cd_and_mana>div>div:last-child>span{
	color: #576c86;
	font-weight: normal;
	margin: 0px 2px;
}

.AbilityLore{
	margin: 10px;
	padding: 10px;
	font-size: 15px;
	font-style: italic;
	color: #5c6e7c;
	background: rgb(0 0 0 / 50%);
}

.red{
	position: fixed;
	z-index: 10;
	width: 4px;
	height: 4px;
	background: red;
	transform: translateX(-50%) translateY(-50%);
}




/* TALENT TOOLTIP */

.talent_tooltip{
	position: absolute;
	left: 755px;
	top: 650px;
	opacity: 0;
	transition: 0.2s opacity ease-out;
}

.talent_tooltip.open{
	opacity: 1;
}



.talent_box{
	width: 420px;
	text-align: center;
	background: #1a1b1d;
	box-shadow: 0px 5px 10px #00000054;
}

.talent_row {
	display: flex;
	justify-content: space-between;
	margin: 0px -4px;
	margin-bottom: 7px;
}

.talent_cell {
	background: rgb(35,41,45);
	background: -moz-linear-gradient(45deg, rgba(35,41,45,1) 0%, rgba(52,58,62,1) 100%);
	background: -webkit-linear-gradient(45deg, rgba(35,41,45,1) 0%,rgba(52,58,62,1) 100%);
	background: linear-gradient(45deg, rgba(35,41,45,1) 0%,rgba(52,58,62,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23292d', endColorstr='#343a3e',GradientType=1 );
	flex: 1;
	color: gray;
	display: flex;
	align-items: center;
	justify-content: center;
	text-shadow: 0px 1px 2px #000000c4;
	padding: 0px 10px;
	box-shadow: 0px 0px 2px #0000008a inset, 0px 1px 4px #0000001a;
	font-size: 16px;
}

.talent_cell.selected{
	color: #c09965;
	text-shadow: 0px 1px 3px #ff6420;
	box-shadow: 0px 0px 15px 0px #fd944f5e inset;
}

.talent_row .talent_cell:last-child{
	background: rgb(52,58,62);
	background: -moz-linear-gradient(45deg,  rgba(52,58,62,1) 0%, rgba(35,41,45,1) 100%);
	background: -webkit-linear-gradient(45deg,  rgba(52,58,62,1) 0%,rgba(35,41,45,1) 100%);
	background: linear-gradient(45deg,  rgba(52,58,62,1) 0%,rgba(35,41,45,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#343a3e', endColorstr='#23292d',GradientType=1 );
}

.talent_tree_title {
	font-size: 20px;
	letter-spacing: 1px;
	padding: 6px;
	color: #e1e1e1;
	text-shadow: 0px 1px 2px #000000c4;
}

.talent_level {
	width: 45px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	background: rgb(37,37,38);
	background: -moz-linear-gradient(top, rgba(37,37,38,1) 0%, rgba(56,56,56,1) 100%);
	background: -webkit-linear-gradient(top, rgba(37,37,38,1) 0%,rgba(56,56,56,1) 100%);
	background: linear-gradient(to bottom, rgba(37,37,38,1) 0%,rgba(56,56,56,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252526', endColorstr='#383838',GradientType=0 );
	border-radius: 100%;
	margin: 0px -6px;
	margin-bottom: 5px;
	margin-top: -3px;
	position: relative;
	z-index: 10;
	box-shadow: 0px 0px 2px black inset;
	padding: 4px;
}

.talent_level>div {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	background: rgb(28,29,29);
	background: -moz-linear-gradient(top,  rgba(28,29,29,1) 0%, rgba(11,12,14,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(28,29,29,1) 0%,rgba(11,12,14,1) 100%);
	background: linear-gradient(to bottom,  rgba(28,29,29,1) 0%,rgba(11,12,14,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c1d1d', endColorstr='#0b0c0e',GradientType=0 );
	color: #e7d292;
	text-shadow: 0px 0px 5px #ff4d00, 0px 0px 5px #ff4d00,0px 0px 10px #ff4d00;
}

.talent_box .stairs{
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	bottom: -8px;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: -1;
}

.talent_box .stairs.align_top{
	bottom: auto;
	top: -16px;
	flex-direction: column-reverse;
}

.talent_box .stairs>div{
	height: 8px;
	width: 120px;
	background: #1a1b1d;
	box-shadow: 0px 5px 10px #00000054;
}

.talent_box .stairs>div:last-child{
	width: 80px;
}



/* AGHS TOOLTIP */



.aghs_tooltip{
	position: absolute;
	left: 755px;
	top: 650px;
	opacity: 0;
	transition: 0.2s opacity ease-out;
}

.aghs_tooltip.open{
	opacity: 1;
}



.aghs_tooltip{
	/* width: 420px; */
	/* text-align: center; */
	/* background: #1a1b1d; */
	/* box-shadow: 0px 5px 10px #00000054; */
	position: absolute;
}

.aghs_shard_tooltip .top {
	display: flex;
	align-items: center;
	height: 45px;
}

.aghs_tooltip .tooltip_content {
	/* width: 420px; */
}

.aghs_shard_tooltip {
	box-shadow: 0px 5px 10px #00000054;
	width: 400px;
	border: 2px solid #000101;
	background: url(../images/dota/ability_tooltip_psd.png) no-repeat;
	background-color: #101415;
	box-shadow: 0px 5px 10px rgb(0 0 0 / 50%);
}



.aghs_glow {
	background: url(../images/dota/aghs_glow.png) no-repeat;
	width: 83px;
	height: 83px;
	/* background-position: -60px -60px; */
	background-size: 100% 100%;
	position: absolute;
	animation: aghsGlow 3s infinite;
}


@keyframes aghsGlow {
  0% {width: 63px; height: 63px;}
  50% {width: 103px; height: 103px;}
  100% {width: 63px; height: 63px;}
}


.aghs_icon_frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.aghs_icon_frame img {
	position: relative;
	z-index: 3;
	width: 40px;
}

.aghs_icon {
	margin: 2px 14px;
}


.aghs_title {
	/* font-weight: bold; */
	/* font-size: 22px; */
	background: -webkit-linear-gradient(left, rgba(99,201,254,1) 0%,rgba(102,141,248,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: rgba(99,201,254,1);
	position: relative;
	z-index: 1;
}



.aghs_title_box {
	font-weight: bold;
	font-size: 22px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.aghs_title_shadow {
	position: absolute;
	color: transparent;
	text-shadow: 2px 2px 0px black;
}

.aghs_box .body {
	display: flex;
	margin: 10px;
	padding: 5px;
	border-radius: 2px;
}

.aghs_box .affected_ability_icon {
	margin-right: 10px;
}

.affected_ability {
	display: flex;
	align-items: center;
	/* justify-content: flex-start; */
}

.affected_ability_title {font-family: 'Reaver';font-size: 22px;font-weight: 600;}

.aghs_box .upgrade {
	color: #90a4c0;
	background: #324a7f;
	border-radius: 3px;
	padding: 2px 9px;
	margin-left: 10px;
	white-space: nowrap;
}

.affected_ability_desc {
	color: #90a4c0;
	margin: 5px 0px;
}

.affected_ability_icon>img {
	box-shadow: 0px 3px 5px black;
}

.aghs_connector {
	background: #101212;
	height: 15px;
	margin: 0px 20px;
	opacity: 0.9;
}

.aghs_shard_tooltip .body-none {
	/* text-align: center; */
	padding: 20px 20px;
	display: none;
	color: #90a4c0;
}

.aghs_tooltip .new_ability{
	background: #4c697c69;
}

.user_prompt_to_click {
	pointer-events: none;
	position: absolute;
	left: -162px;
	background: rgb(82 21 195 / 71%);
	background: linear-gradient(to bottom, rgb(82 21 195 / 71%) 0%,rgb(50 11 89 / 78%) 100%);
	
	padding: 5px 10px;
	border-radius: 3px;
	top: -100px;
	transition: top 0.25s ease-out;
}


.user_prompt_to_click.open {

	top: 5px;
	left: -162px;
	animation: userClickPrompt 2.5s infinite 0.5s;
}


@keyframes userClickPrompt {
  0% {left: -162px;}
  25% {left: -182px;}
  50% {left: -162px;}
  50% {left: -162px;}
}

.hero_roles>span {
	margin: 0px 6px;
	font-size: 14px;
	color: #000000c4;
}

.hero_roles{
	text-transform: uppercase;
}

.tooltip_bottom .tooltip_content {
	position: absolute;
	bottom: 120px;
}

.tooltip_bottom .tooltip_arrow {
	transform: rotate(-90deg);
	left: -12px;
	bottom: 95px;
}



.item_frame {
	width: 60px;
	height: 45px;
	/* border: 1px solid red; */
	display: inline-block;
	margin: 1.5px 1.25px;
	/* background: rgba(255,0,0,0.4); */
	
}

.item_frame.item_backpack {
	height: 33px;
}

.item_frame.active {
	cursor: pointer;
	background: #ffffff21;
}

.item_frame:last-child {
	width: 56px;
}

.item_frame.teleport0{
	width: 40px;
	height: 40px;
	/* background: #ff0000ba; */
	border-radius: 100%;
	position: absolute;
	right: -12px;
	bottom: 12px;
}

.item_frame.neutral0{
	width: 40px;
	height: 40px;
	/*background: #ff0000ba;*/
	border-radius: 100%;
	position: absolute;
	right: -12px;
	bottom: 65px;
	/*cursor: pointer;*/
}

/*.item_frame.neutral0:after{
	content: 'Tooltips for neutral items coming soon!';
	position: absolute;
	width: 200px;
	background: #000000d1;
	line-height: 1.2;
	text-align: center;
	padding: 8px 0px;
	left: 33px;
	top: -8px;
	border-radius: 3px;
	opacity: 0;
	pointer-events: none;

	transition: left 0.25s ease-out, opacity 0.25s ease-out;
}

.item_frame.neutral0:hover:after{
	opacity: 1;
	left: 53px;
}*/

.item_active h1 {
	font-family: 'Radiance';
	font-size: 19px;
	padding: 5px 10px;
	margin: 0px;
	background: url('../images/dota/item_tooltip_active_psd.png') no-repeat;
	background-size: cover;
	color: #b1b1ff;
	text-shadow: 2px 2px 0px rgba(0,0,0,0.3);
}

.item_active {
	margin: 10px;
}

.item_active>div {
	padding: 10px;
	background: #1c253e;
	text-shadow: 2px 2px 0px rgb(0 0 0 / 30%);
	color: #878eba;
	line-height: 1.5;
	padding-top: 5px;
}

/*passive*/

.item_passive h1 {font-family: 'Radiance';font-size: 19px;padding: 5px 10px;margin: 0px;background: url('../images/dota/item_tooltip_passive_psd.png') no-repeat;background-size: cover;color: #92a1b5;text-shadow: 2px 2px 0px rgba(0,0,0,0.3);}

.item_passive {
	margin: 10px;
}

.item_passive>div {
	padding: 10px;
	background: #1d272db8;
	text-shadow: 2px 2px 0px rgb(0 0 0 / 30%);
	color: #748293;
	line-height: 1.5;
	padding-top: 5px;
}

/*use */

.item_use h1 {font-family: 'Radiance';font-size: 19px;padding: 5px 10px;margin: 0px;background: url('../images/dota/item_tooltip_use_psd.png') no-repeat;background-size: cover;color: #96c17b;text-shadow: 2px 2px 0px rgba(0,0,0,0.3);}

.item_use {
	margin: 10px;
}

.item_use>div {
	padding: 10px;
	background: #17251f;
	text-shadow: 2px 2px 0px rgb(0 0 0 / 50%);
	color: #789765;
	line-height: 1.5;
	padding-top: 5px;
}


/*upg*/

.item_upgrade h1 {font-family: 'Radiance';font-size: 19px;padding: 5px 10px;margin: 0px;background: url('../images/dota/item_tooltip_passive_psd.png') no-repeat;background-size: cover;color: #92a1b5;text-shadow: 2px 2px 0px rgba(0,0,0,0.3);}

.item_upgrade {
	margin: 10px;
}

.item_upgrade>div {
	padding: 10px;
	background: #1d272db8;
	text-shadow: 2px 2px 0px rgb(0 0 0 / 30%);
	color: #748293;
	line-height: 1.5;
	padding-top: 5px;
}

.item_use>div>b {
	color: #96c17b;
}

span.item_cd_and_mana {
	display: flex;
	color: #e1e1e1;
	text-shadow: 2px 2px 0px #0000009c;
	position: absolute;
	right: 11px;
	top: 6px;
}

.item_cd {
	display: flex;
	margin-left: 15px;
}

.item_cd>img {
	margin-right: 5px;
}

.item_tooltip_box>div {
	position: relative;
}

.item_mana {
	display: flex;
	margin-left: 15px;
}

.item_mana>img {
	margin-right: 3px;
}


.user_prompt_to_mouseover{
	pointer-events: none;
	position: absolute;
	background: rgb(82 21 195 / 71%);
	background: linear-gradient(to bottom, rgb(82 21 195 / 71%) 0%,rgb(50 11 89 / 78%) 100%);
	padding: 4px 10px 7px;
	border-radius: 3px;
	top: -91px;
	opacity: 0;
	transition: top 0.25s ease-out, opacity 0.25s ease-out;
	font-size: 20px;
	color: #e8e8e8;
}


.highlight_spells .bottom_hud .ability{
  	box-shadow: 3px 0px 20px transparent;
	border:1px solid transparent;
	transition box-shadow 0.25s ease-out;

	animation: abilityGlow 2.5s infinite 0s;
}

.content:hover .bottom_hud{

}

/* .content:hover .bottom_hud .ability{

	animation: abilityGlow 2.5s 1 0s;
} */

@keyframes abilityGlow {
  0% {	
  	box-shadow: 3px 0px 20px transparent;
	border:1px solid transparent;
  }
  50% {	
  	box-shadow: 3px 0px 20px #8d31ff;
	border:1px solid #9f56e7;
  }
  100% {
  	box-shadow: 3px 0px 20px transparent;
	border:1px solid transparent;
  }
}

.highlight_spells .user_prompt_to_mouseover{
	/*top: -50px;*/
	opacity: 1;
	animation: userMouseOverPrompt 2.5s infinite 0s;
}


@keyframes userMouseOverPrompt {
  0% {top: -91px;}
  25% {top: -101px;}
  50% {top: -91px;}
  50% {top: -91px;}
}
/*

.quick_highlight .bottom_hud .ability:before, .quick_highlight .bottom_hud .ability:before{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	text-align: center;
	content: '';
	opacity: 1;
	background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.3) 49%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.3) 49%,rgba(255,255,255,0) 75%,rgba(255,255,255,0) 100%);
	background: linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.3) 49%,rgba(255,255,255,0) 75%,rgba(255,255,255,0) 100%);
	animation: quickHighlight 1.5s linear;
	animation-iteration-count: 1;
	background-size: 100px;
	background-position: 400px 0;
	background-repeat: no-repeat;
	z-index: 4;
	mix-blend-mode: overlay;
}

@keyframes quickHighlight {
	0% {
		background-position: -300px 0;
	}
	100% {
		background-position: 400px 0;
	}
}
*/

/*MOBILE UI*/

.mobile_panel{
	background: url("../images/mobile/bg.jpg") no-repeat;
	background-color: #030303;
	/* background-size: 100% 100%; */
	display: flex;
	min-height: 100vh;
	background-attachment: fixed;
	flex-direction: column;
}

.hero_row {
	margin: 10px;
	background: #0000004a;
	transition: margin 0.25s ease-out, background 0.25s ease-out;
	/* width: 100%; */
	/* overflow: hidden; */
	position: relative;
}

.hero_row_heading {
	padding: 10px;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	transition: padding 0.25s ease-out;
}

.hero_row_short {
	/* max-height: 0px; */
	margin-bottom: 10px;
	overflow: hidden;
	display: none;
	align-items: flex-start;
	margin-left: 10px;
	margin-right: 10px;
	color: #8db8e4;
	text-transform: uppercase;
	transition: max-height 0.25s ease-out, margin 0.25s ease-out;
}

.hero_row .hero_row_title h1 {
	margin: 0px;
	font-size: 20px;
	margin-left: 10px;
	text-shadow: 2px 2px 1px black;
	color: #f6f6f6;
	display: flex;
	align-items: center;
}

.hero_row .hero_row_icon {
	display: flex;
}

.hero_list .team_title {
	margin-left: 10px;
	margin-top: 20px;
	color: #e6e6e6;
}

.hero_list .team_title.radiant {
	text-shadow: 0 0 4px #4b9c2b, 0 0 4px #4b9c2b;
}

.hero_list .team_title.dire {
	text-shadow: 0 0 4px #b84323, 0 0 4px #b84323;
}

.hero_list {
	margin-bottom: 300px;
	width: 100%;
}

.hero_list img.hero_attribute_icon {
	margin-right: 6px;
}



span.ripple {
	pointer-events: none;
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	/*animation: ripple 600ms linear;*/
	transition: transform 300ms ease-out, opacity 300ms linear;
	background-color: rgba(235, 235, 255, 0.3);
}

/*@keyframes ripple {
	to {
		transform: scale(4);
		opacity: 0;
	}
}*/

.hero_row.open>span.ripple{
	transition: transform 600ms linear, opacity 600ms linear;
	transform: scale(4);
	opacity: 0;
}

/*.hero_row>span.ripple{
	transform: scale(4);
	opacity: 0;
}*/

.hero_row.open {
	/* margin: 0px; */
	/* background: transparent; */
}

.hero_row.open .hero_row_short {
	/* max-height: 100px; */
	/* margin-bottom: 10px; */
}

.hero_row.open .hero_row_heading {
	/* align-items: flex-start; */
	/* padding: 20px; */
}

.hero_row_content {
	/* position: absolute; */
	/* left: 0px; */
	width: 100%;
	/* background: black; */
	/* background: url(../images/mobile/bg.jpg) no-repeat; */
	/* background-position: -100px -100px; */
	z-index: 10;
	max-height: 0px;
	/* min-height: 0px; */
	/* height: 0px; */
	overflow: hidden;
	transition: max-height 0.35s ease-out, min-height 0.35s ease-out, height 0.35s ease-out;
}

.hero_row_title {
	transition: margin 0.25s ease-out;
	/* margin-top: 14px; */
}

.hero_row.open .hero_row_title {
	margin-top: 0px;
}

.hero_row.open .hero_row_content {
	max-height: 1000px;
	/* min-height: 400px; */
}

.hero_row_tabs {
	padding: 0px 10px;
	display: flex;
	background: #0000005e;
	box-shadow: 0px 0px 10px 0px #9edeff24;
	position: relative;
	overflow: hidden;
	align-items: center;
}

.hero_row_tabs>div {
	margin: 13px 10px;
	color: gray;
}

.hero_row_tabs>span {
	margin: 0px 10px;
	opacity: 0.2;
}

.hero_row_tabs>div.selected {
	color: #8db8e4;
	text-shadow: 0px 0px 9px;
}

.hero_row_tab_window {
	/* position: absolute; */
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero_row_tab_windows {
	position: relative;
	width: 300%;
	/* height: 636px; */
	transform: translateX(-0%);
	display: none;
	opacity: 0;
	transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.hero_row.pre_open .hero_row_tab_windows {
	display: flex;
}

.hero_row.open .hero_row_tab_windows {
	opacity: 1;
}

.hero_row .ability_box {
	width: 60px;
	height: 60px;
	position: relative;
	margin: 5px;
	filter: brightness(0.5) saturate(0.5);
}

.hero_row .small_ability_icons .ability_box {
	width: 50px;
	height: 50px;
}
.hero_row .hero_row_abilities {
	display: flex;
	/* overflow-x: scroll; */
	align-items: center;
	/* flex: 1 1 auto; */
}

.hero_row_abilities_top {
	display: flex;
	padding: 5px 10px;
}

.hero_row .ability_box>img {
	max-width: 100%;
	max-height: 100%;
}

.hero_row .ability_box.selected {
	filter: brightness(1.1);
}

.hero_row .ability_box.selected:after{
	content: '';
	width: 0px;
	height: 0px;
	border: 10px solid transparent;
	border-bottom: 15px solid rgba(0,0,0,0.3);
	position: absolute;
	left: 50%;
	bottom: -15px;
	margin-left: -11px;
}

.hero_row .ability_tooltip_box {
	width: 100%;
	background: #0000004f;
	border: 0px;
}

.hero_row_abilities_body {
	height: calc(100% - 70px);
	overflow-y: scroll;
	margin-top: 5px;
}

.hero_row .AbilityTitle {
	background: transparent;
}

.waiting_for_data{
	text-align: center;
	opacity: 0.5;
	font-style: italic;
}

.hero_row_tab_icon {
	margin: -12px -8px -10px;
	width: 42px;
	height: 42px;
	background-size: 42px 42px;
}

.hero_row_tabs .hero_row_aghs_icon.hero_row_tab_icon {
	background-image: url(../images/dota/aghsicon_off.png);
}

.hero_row_tabs .selected .hero_row_aghs_icon.hero_row_tab_icon {
	background-image: url(../images/dota/aghsicon_on.png);
}



.hero_row_tabs .hero_row_talent_icon.hero_row_tab_icon {
	background-image: url(../images/dota/statbranch_off.png);
}

.hero_row_tabs .selected .hero_row_talent_icon.hero_row_tab_icon {
	background-image: url(../images/dota/statbranch_on.png);
}

.aghs_tab .aghs_shard_tooltip {
	width: 100%;
	border: 0px;
	background: #00000047;
}

.hero_row_tab_window.aghs_tab {
	padding: 10px 0px;
	/* background: rgba(0,0,0,0.3); */
}

.aghs_tab .aghs_connector {
	margin: 0px;
	background: #00000087;
	margin-top: -10px;
	/* display: none; */
}

.talent_tab .talent_box {
	width: 100%;
	margin-top: 11px;
}

p.coming_soon {
	width: 100%;
	text-align: center;
	opacity: 0.5;
}

.patch_line {
	display: flex;
	margin: 5px;
	padding: 5px 0px;
}

.patch_line .patch_version {
	color: #a1935a;
}

.patchnotes {
	background: #19222b;
	margin: 0px 10px;
	padding: 0px 5px;
}

.patch_line .patch_line_text {
	color: #838787;
	margin-left: 5px;
}

.left_menu {
	position: absolute;
	left: -100px;
	opacity: 0;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 12;
	transition: left 0.25s ease-out;
}

.left_menu.enabled {
	left: 0px;
	opacity: 1;
}

.menu_box {
	width: 64px;
	height: 64px;
	background: #18181b;
	border-radius: 4px;
	position: relative;
	margin-left: 12px;
	overflow: hidden;
	cursor: pointer;
}

.menu_box:hover{
background: #2c2c30;
}

.menu_box_mask {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transform: translateY(0);
	transition: transform 0.25s ease-out;
}

.gaming .menu_box_mask{
	transform: translateY(-50%);
}

.menu_box_mask>img {
	max-width: 100%;
}

.menu_tooltip {
	position: absolute;
	width: 330px;
	background: #18181b;
	right: -334px;
	padding: 15px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 300;
	color: #b7b7b7;
	border-radius: 4px;
	pointer-events: none;
	line-height: 1.3;
	opacity: 0;
	transition: right 0.2s ease-out, opacity 0.1s ease-out;
}

.menu_tooltip_title {
	color: #955aee;
	font-size: 20px;
	margin-bottom: 9px;
}

.extension_mode_box {transform: translateX(-105%);transition: transform 0.25s ease-out;}

.content.hovering .extension_mode_box {
	transform: translateX(0%);
}

.switched_modes.extension_mode_box {
	transform: translateX(0%);
}

.extension_mode_box:hover .menu_tooltip {
	opacity: 1;
	right: -344px;
}











/* WEEB VISION */

/*.weeb_vision_box{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 20;
	pointer-events: none;

	opacity: 0;
}

.weeb_vision_box.active{
	opacity: 1;
}*/

.streamer_hero {
	margin-left: 10px;
	margin-top: 4px;
	color: #9643d1;
	text-shadow: 0px 1px 4px #9f00ff;
}

.hero_row.streamer_row .hero_row_heading {
	box-shadow: 0px 0px 20px #7a32cd inset;
	border: 1px solid #8d43c8;
}

.hero_row.streamer_row .mobile_items_info{
	display: none;
}

.item_list_base {
	width: 225px;
	vertical-align: top;
	margin: 10px 10px;
	margin-right: 0px;
	overflow: hidden;
	display: inline-block;
}

.item_slot {
	display: inline-block;
	width: 64px;
	height: 47px;
	background: #0000009e;
	border: 1px solid #ffffff3d;
	margin: 3px 5px;
	float: left;
	position: relative;
}

/* .item_list .item_icon.selected{
	filter: brightness(1.2);
} */

.item_list_base hr{
	float: left;
	width: calc(100% - 13px);
	margin: 3px 10px 1px;
	margin-left: 5px;
	height: 1px;
	border: none;
	background: #00000070;
}

.item_slot:nth-child(n+7){
	height: 38px;
	margin-top: 5px;
	overflow: hidden;
	filter: grayscale(0.6);
}

.item_slot .item_charges{
	color: #d5d5d5;
	position: absolute;
	z-index: 3;
	bottom: 1px;
	right: 5px;
	text-shadow: 1px 1px 2px black;


}

.item_slot>img{
	max-width: 100%;
}


.item_details {
	text-align: center;
}

.item_neutral_slot {
	display: inline-block;
	margin: 13px;
	margin-left: 0px;
	width: 46px;
	height: 46px;
	overflow: hidden;
	border-radius: 100%;
	background: #0000009e;
	border: 1px solid #ffffff3d;
}

.item_neutral_slot>img{
	max-height: 95%;
	margin-left: -6px;
	margin-top: 1px;
}

.item_list {
	display: flex;
	/* align-items: center; */
}

.items_tab .item_tooltip_box {
	text-align: left;
	border: 0px;
	box-shadow: none;
	background: none;
	padding-bottom: 5px;
	background: #0000004f;
	width: auto;
}

.items_tab .item_heading {
	border-bottom: 1px solid #576c8626;
	background: none;
}

.hero_card_items {
	background: #00000080;
	/* margin-left: 140px; */
	/* display: inline-block; */
}

.hero_card_items .item_list_base {
	width: auto;
}

.hero_card_items .item_icon {
	cursor: pointer;
}

.hero_card_items .item_charges{
	pointer-events: none;
}


.hero_card_items .item_icon:hover{
	filter: brightness(1.2);
}




/* -----------------  */
/*  	 ITEM SHOP			*/
/* -----------------  */

.item_shop_container{
	position: absolute;
	z-index: 10;
	right: 0px;
	top: 0px;
	display: none;
}

.item_shop_box{
	position: absolute;
	right: 0px;
	top:  80px;
	width: 400px;
	background: black;
	box-shadow: 0px 6px 15px black;
}

.item_shop_heading{}

.item_shop_search{
	background: black;
	border: 1px solid #363d43;
	margin: 10px 5px;
	padding: 10px;
	width: 350px;
	border-radius: 4px;
	color: white;
	font-family: 'Radiance';
	font-weight: bold;
	font-size: 16px;
}
.item_shop_search::placeholder {
  color: #58656e;
}

.item_shop_tabs_nav{
	display: flex;
}

.item_shop_tabs_nav>div{
	background: #111111;
	padding: 8px 25px;
	margin: 1px 5px 0px 5px;
	border-radius: 8px 8px 0px 0px;
	color: #b1b1b1;
	font-weight: bold;
	cursor: pointer;
	border: 1px solid transparent;
	/* border-bottom: 0px; */
}

.item_shop_tabs_nav>div:hover{
	background:#1b1b1b;

}



.item_shop_tabs_nav>div.selected{
	background:#1b1b1b;
	border: 1px solid #2c3135;
	border-bottom: 0px;
	color: white;
}


.item_shop_tabs{
background: linear-gradient(180deg, #1a1a1a, transparent);
border-top: 1px solid #2c3135;
height: 620px;
box-shadow: 0px -1px 6px #333333 inset;
}

.item_shop_tabs>div{

display: none;
}



.item_shop_tabs>div.selected{

display: block;
}



.item_shop_category{

width: calc(50% - 15px);

display: inline-block;

margin: 5px;

vertical-align: top;
}

.item_shop_category_title{
	
text-transform: uppercase;
	
font-weight: bold;
	
margin: 5px 0px;
	
color: #80867d;
	
text-shadow: 2px 2px black;
}


.item_shop_category_list{
	
}

.item_shop_container .shop_item{
	display: inline-block;
	margin: 1px 2px;
	cursor: pointer;
}



.item_shop_container .shop_item:hover{
	filter: brightness(1.5);
}



.item_shop_container .shop_item img{
	float:left;
}


.tooltip_left .tooltip_arrow {
	left: auto;
	right: -25px;
	top: 100px;
	transform: scaleX(-100%);
}

.tooltip_left .tooltip_content {
	transform: none;
}

.tooltip_overflow .tooltip_content {
	transform: translateY(-300px);
}

.item_shop_neutral_tier_heading {
	display: flex;
	justify-content: space-between;
	/* padding: 0px 10px; */
	font-size: 19px;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.item_shop_neutral_tier_list {
	/* text-align: center; */
}

.item_shop_neutral_tier {
	margin: 14px 62px;
	color: #656565;
}

.item_shop_neutral_tier_title {
	font-weight: bold;
}

.item_shop_neutral_tier_title.tier_1 {
	color: #bfbfbf;
}

.item_shop_neutral_tier_title.tier_2 {
	color: #93e47f;
}

.item_shop_neutral_tier_title.tier_3 {
	color: #8094fc;
}

.item_shop_neutral_tier_title.tier_4 {
	color: #d57cff;
}

.item_shop_neutral_tier_title.tier_5 {color: #ffe196;}

.ability_video_preview {
	width: 620px;
	background: #00010180;
	border: 2px solid #000101;
	/* padding: 2px; */
	display: flex;
	flex-direction: column;
	right: 90px;
	position: absolute;
	box-shadow: 0px 7px 10px #00000070;
}

.ability_video_preview_container {
	position: absolute;
	right: -740px;
	top: 460px;
	z-index: 20;
	transition: right 0.15s ease-out;
}

video.ability_video_preview_player {
	max-width: 100%;
	float: left;
	transition: opacity 0.25s ease-out;
	position: absolute;
}

.ability_video_heading {
	background: linear-gradient(90deg, #202a2f, #1a2226);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	/* margin-bottom: 2px; */
	border-bottom: 2px solid #000101;
}

.ability_video_details {
	font-family: 'Reaver';
	font-weight: bold;
	font-size: 20px;
	display: flex;
	align-items: center;
}

img.ability_video_icon {
	margin-right: 10px;
}

.ability_video_close {
	cursor: pointer;
	padding: 10px;
}

.ability_video_close:hover {
	filter: brightness(1.5);
}

.ability_video_preview_container.open {
	right: 0px;
}

video.ability_video_preview_player.loading {
	opacity: 0;
	transition: opacity 0.1s linear;
}

.ability_video_preview_box {
	padding-bottom: 56.25%;
	position: relative;
	overflow: hidden;
}

.ability_tooltip_box .ability_click_to_preview {
	background: linear-gradient(90deg, #9b59ff, #7730ec);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	text-shadow: 1px 1px 2px black;
}

.ability_tooltip_box .ability_click_to_preview>img {
	margin-right: 6px;
}