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


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

:root {
  /* color-scheme: dark; */
}


/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: #0000001f;
	width: 20px;
}

::-webkit-scrollbar-thumb {
  background-color: #8462ff;
  border-radius: 1px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

a {
  color: #00B7FF;
  text-decoration: none;
}


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: block;
	flex: 1;
	/* flex-direction: column; */
	/* justify-content: space-between; */
}

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

.hero_card .hero_spells_and_talents>div{
	margin-right: 5px;
	vertical-align: top;
}


.hero_card .abilities{
	display: flex;
}

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

.hero_card .abilities 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: 9px;
	margin-right: 2px;
	margin-top: 4px;
	width: 62px;
	height: 62px;
	/* border: 1px solid yellow; */
	border-radius: 100%;
}


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

.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; */
	margin-right: 0px;
	margin-left: 0px;
}

/*.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: 52px;
	height: 52px;
	margin: 8px 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-right: 1px;
}
.bottom_hud .abilities.AbilityIconSmall .ability{
	/* width: 52px; */
	/* height: 52px; */
	/* margin: 8px 3px; */
}


/*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;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}


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


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

.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: 0px 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;
	padding-top: 0px;
}


.ability_stats{
	color: #6a9edf;
	font-size: 17px;
	margin: 0px 10px;
	padding: 10px;
	padding-bottom: 0px;
	/*border-bottom: 1px solid #576c866e;*/
}


.ability_stats>div{
	/* display: flex; */
	margin-bottom: 7px;
	/* 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;
	/* color: white; */
}


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

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



.ability_cd_and_mana{
	display: inline-flex;
	/* margin-bottom: 5px; */
	font-size: 17px;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px;
}


.ability_cd_and_mana>div{
	display: inline-flex;
	margin-left: 20px;
	align-items: center;
	margin-right: 10px;
	margin-bottom: 0px;
}

.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;
	position: relative;
}

.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; */
	flex-direction: column;
}

.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;
	align-items: center;
	flex-direction: row-reverse;
}

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

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

.item_tooltip_box>div {
	position: relative;
}

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

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


.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: 0px 5px;
	margin-bottom: 3px;
	/* padding: 5px 0px; */
	/* border-bottom: 1px solid #a1935a82; */
}

.patch_line .patch_version {
	color: #a1935a;
}

.patchnotes {
	background: #19222b;
	margin: 0px 10px;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	/* display: none; */
}

.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: 5px;
	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;
	top: 0px;
}

.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%);
}

.menu_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;
}


/*SETTING PANELS*/


.settings_container {
	position: absolute;
	left: -940px;
	z-index: 30;
	top: 170px;
	transition: left 0.2s ease-out;
	width: 700px;
	height: 602px;
	border-radius: 0px 10px 10px 0px;
	background: linear-gradient(
310deg, #131518d9, #131518eb);
}

.settings_container.open {
	left: 0px;
}

.settings_container_close {
	width: 39px;
	height: 39px;
	background: #ffffff21;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: linear-gradient( 
45deg, #000000d6, #0000005c);
	border-radius: 10px;
}

.settings_container_close:hover {
	filter: brightness(1.3);
}

.extension_about_tab.extension_about_tab_container {
	font-size: 16px;
	margin-top: 24px;
}

.extension_about_tab.extension_about_tab_container p {
	color: #ababab;
}


.extension_select_language {
	margin: 10px 0px;
}

.extension_settings_box {
	margin: 20px;
	font-size: 18px;
}

.extension_select_language label {
	margin-right: 10px;
}

.setting_toggle {
	margin: 10px 0px;
	display: inline-flex;
	align-items: center;
	transition: filter 0.15s ease-out;
	cursor: pointer;
}

.setting_toggle_checkbox {
	width: 20px;
	height: 20px;
	border: 3px solid #3c4344;
	box-shadow: 0px 0px 0px 3px #000000c9;
	background: black;
	margin: 5px;
}

.setting_toggle_label {
	margin-left: 10px;
}

.setting_toggle:hover {
	/* filter: brightness(1.3); */
	color: white;
}

select#extension_setting_language {
	font-size: 18px;
}

.toggle_selected .setting_toggle_checkbox {
	background: #d7eeed;
	border: 3px solid black;
	box-shadow: 0px 0px 6px 0px white;
}

.feature_disabled {
	display: none;
}

.extension_about_box>div {
	/* display: flex; */
}

.extension_about_box {
	display: flex;
}

img.extension_about_icon {
	width: 120px;
	margin-top: 20px;
	margin-right: 20px;
}

p.extension_about_paragraph {
	margin-bottom: 0px;
}

.extension_about_tab {
	padding-right: 40px;
}

h2.extension_about_title {
	font-family: 'Reaver';
	margin-bottom: 4px;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.extensoin_about_box p {}

.extension_about_box p {
	margin-top: 0px;
}

a.view_extension_button {
	text-decoration: none;
	color: #c9c9c9;
}

.view_extension_button div {
	background: #9154f6;
	padding: 5px 10px;
	border-radius: 4px;
	display: inline-block;
	color: white;
}

.ti10_content_title {
	font-family: 'Reaver';
	/* font-weight: bold; */
	font-size: 22px;
	color: #9154f6;
	/* color: #ffffffab; */
	text-transform: uppercase;
	margin-bottom: -5px;
	display: flex;
	justify-content: space-between;
}

.ti10_content_subtitle {
	font-size: 30px;
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Reaver';
}

.menu_box_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.menu_box.menu_box_settings {
    cursor: pointer;
}

.menu_tooltip.mode {
    top: 50px;
}

.menu_tooltip_ext_title{
	font-family: 'Reaver';
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 5px;
	color: #c3c3c3;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.bottom_hud .facet_and_innate_hitbox {
	height: 84px;
	width: 30px;
	/* border: 1px solid yellow; */
	cursor: pointer;
	margin-right: 4px;
}

.bottom_hud .abilities.SixAbilities .ability {
	/* width: 50px; */
	/* height: 50px; */
	/* margin: 9px 3px; */
}

.ability_cd_and_mana .ability_range>img {
	width: 20px;
}

.ItemCost.neutral_item {
	font-size: 17px;
	color: #999999;
}

.item_health_cost {
	display: flex;
	margin-left: 15px;
	color: #ce2b2b;
}

.item_health_cost>img {
	width: 20px;
	margin-right: 2px;
}

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

.item_range>img {
	width: 20px;
	margin-right: 2px;
}



.facets_and_inate_tooltip{
	position: absolute;
	left: 880px;
	top: 540px;
	opacity: 0;
	transition: 0.2s opacity ease-out;
	/* pointer-events: initial; */
}

.facets_and_inate_tooltip.open{
	opacity: 1;
}


.facet_tooltip_box{
	width: 356px;
	width: 400px;
	border: 2px solid #000101;
	/* background: url('../images/dota/ability_tooltip_psd.png') no-repeat; */
	background-color: #192025;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
	/* margin-bottom: 5px; */
	position: relative;
	z-index: 2;
	border-radius: 5px;
	/* overflow: hidden; */
}

.facet_heading{
	/* background: #202a2f; */
	/* padding: 8px 10px; */
	display: flex;
	align-items: center;
	position: relative;
	height: 42px;
	border-radius: 5px 5px 0px 0px;
	overflow: hidden;
	z-index: 2;
	/* background-image: url('/images/dota/ripple_texture.png'); */
}

.FacetIcon{
	display: flex;
	/* margin-right: 10px; */
	width: 52px;
	height: 42px;
	align-items: center;
	justify-content: center;
	background: #00000042;
	position: relative;
	z-index: 2;
}

.FacetTitle{font-family: 'Reaver';font-size: 18px;text-transform: uppercase;font-weight: 600;letter-spacing: 1px;text-shadow: 2px 2px 2px black;/*border-bottom: 1px solid #576c8626;*/padding: 0px 10px;position: relative;z-index: 2;}

.FacetIcon>img {
	width: 26px;
}

.FacetDescription {
	padding: 16px;
	color: #98ADC8;
	font-family: 'Reaver';
	/* line-height: 2; */
}

.facet_heading:before {
	background-image: url('../images/dota/ripple_texture.png');
	background-size: cover;
	background-position: center;
	opacity: 0.2;
	width: 100%;
	height: 100%;
	content: '';
	position: absolute;
	z-index: 10;
}

.facet_heading .facet_background {
	/* background: linear-gradient( to right, #547EA6, #2A385E ); */
	background-size: cover;
	background-position: center;
	opacity: 1;
	width: 100%;
	height: 100%;
	content: '';
	position: absolute;
	z-index: 0;
}



.AbilityIsInnate {
	font-family: 'Radiance';
	font-size: 15px;
	font-weight: normal;
	padding: 1px 8px 2px;
	background: #4B4A43;
	display: inline-flex;
	border: 1px solid #77766B;
	border-radius: 2px;
	color: #E5D4AF;
	text-shadow: 0px 1px 2px black;
}

.ability_heading img.ability_icon {
	width: 52px;
	margin-right: 10px;
}

.ability_tooltip_box .ability_heading {
	display: flex;
	align-items: center;
	background: #202a2f;
	padding: 8px 20px;
}

.ability_tooltip_box.innate_layout .ability_details {
	border-bottom: 0px;
	padding: 0px;
}

.ability_tooltip_box.innate_layout .ability_heading {
	padding: 11px 20px;
}

.facets_and_inate_tooltip .tooltip_content {
	display: flex;
	flex-direction: row-reverse;
	margin-left: -200px;
	/* align-items: flex-end; */
}

.main_tooltip .facet_tooltip_box {
	margin-bottom: 5px;
}

.other_facets .facet_tooltip_box {
	margin-bottom: 8px;
	border-radius: 5px;
	overflow: hidden;
}

.other_facets {
	margin-right: 11px;
	/* transform: scale(0.85); */
	transform-origin: bottom right;
}

.main_tooltip .facet_heading::after {content: '';position: absolute;background: url('../images/dota/check_corner_topright.svg') no-repeat;background-size: contain;width: 35px;height: 34px;right: -1px;top: -1px;}

.main_tooltip .facet_tooltip_box:before {
	position: absolute;
	content: '';
	width: calc( 100% + 4px);
	height: calc(100% + 4px);
	background: linear-gradient(180deg, white, #636363);
	top: -2px;
	left: -2px;
	z-index: 1;
	border-radius: 5px;
}

.facet_desc {
	position: relative;
	z-index: 2;
	background: #192025;
	border-radius: 0px 0px 5px 5px;
	overflow: hidden;
}

.ability_tooltip_box.innate_layout {
	z-index: 10;
	position: relative;
}

.innate_layout .ability_cd_and_mana {
	margin-bottom: 15px;
}

.facets_and_inate_tooltip 
 .main_tooltip {
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: flex-end;
	align-items: flex-end;
}

.facet_and_innate_stack {
	cursor: pointer;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
}

.facet_and_innate_stack .facet {
	width: 28px;
	height: 28px;
	background: linear-gradient(315deg, #19212d, #5d7086);
	border-radius: 4px;
	margin-bottom: 5px;
	box-shadow: 0px 0px 4px 0px #ffffff75 inset,
0px 2px 1px -1px black;
	display: flex;
	align-items: center;
	justify-content: center;
}

.facet_and_innate_stack .innate {
	width: 32px;
	height: 32px;
	background-image: url('../images/dota/innate_icon.png');
	background-size: cover;
}

.facet .facet_icon {
	font-family: 'Reaver';
	font-weight: bold;
	font-size: 21px;
	color: #8093ac;
}

.hero_card .talents {
	height: 64px;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}


.hero_card .aghs {
	height: 64px;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.hero_card .abilities.ManyAbilities {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}

.facet .facet_icon img {
	width: 17px;
}




/* FACET GRADIENTS */

.red_0{
    background: linear-gradient( to right, #9F3C3C, #4A2040 ) !important;
}
.red_1{
    background: linear-gradient( to right, #954533, #452732 ) !important;
}
.red_2{
    background: linear-gradient( to right, #A3735E, #4F2A25 ) !important;
}

.yellow_0{
    background: linear-gradient( to right, #C8A45C, #6F3D21 ) !important;
}
.yellow_1{
    background: linear-gradient( to right, #C6A158, #604928 ) !important;
}
.yellow_2{
    background: linear-gradient( to right, #CAC194, #433828 ) !important;
}
.yellow_3{
    background: linear-gradient( to right, #C3A99A, #4D352B ) !important;
}

.green_0{
    background: linear-gradient( to right, #A2B23E, #2D5A18 ) !important;
}
.green_1{
    background: linear-gradient( to right, #7EC2B2, #29493A ) !important;
}
.green_2{
    background: linear-gradient( to right, #538564, #1C3D3F ) !important;
}
.green_3{
    background: linear-gradient( to right, #9A9F6A, #223824 ) !important;
}
.green_4{
    background: linear-gradient( to right, #9FAD8E, #3F4129 ) !important;
}

.blue_0{
    background: linear-gradient( to right, #727CB2, #342D5B ) !important;
}
.blue_1{
    background: linear-gradient( to right, #547EA6, #2A385E ) !important;
}
.blue_2{
    background: linear-gradient( to right, #6BAEBC, #135459 ) !important;
}
.blue_3{
    background: linear-gradient( to right, #94B5BA, #385B59 ) !important;
}

.purple_0{
    background: linear-gradient( to right, #B57789, #412755 ) !important;
}
.purple_1{
    background: linear-gradient( to right, #9C70A4, #282752 ) !important;
}
.purple_2{
    background: linear-gradient( to right, #675CAE, #261C44 ) !important;
}

.gray_0{
    background: linear-gradient( to right, #565C61, #1B1B21 ) !important;
}
.gray_1{
    background: linear-gradient( to right, #6A6D73, #29272C ) !important;
}
.gray_2{
    background: linear-gradient( to right, #95A9B1, #3E464F ) !important;
}
.gray_3{
    background: linear-gradient( to right, #ADB6BE, #4E5557 ) !important;
}


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

.extension_status_container {
	position: relative;
	opacity: 0;
	/* transform: scale(1.08); */
	/* filter: brightness(1.3); */
	/* pointer-events: none; */
	transition: opacity 0.2s ease-out;
}

.extension_status_container.loaded{
	opacity: 1;
	/* transition: opacity 0.2s ease-out; */
}

.extension_status_box {
	width: 64px;
	height: 32px;
	background: #18181b;
	border-radius: 4px;
	position: relative;
	margin: 5px;
	z-index: 2;
	margin-left: 12px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #434343, #1f1f1f);
	color: #b6b6b6;
	cursor: pointer;
}

.extension_status_text_box {
	position: relative;
	z-index: 10;
	/* width: 418px; */
	height: 28px;
	margin: 2px;
	background: #18181b;
	padding: 5px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: 300;
	color: #b7b7b7;
	/* color: white; */
	border-radius: 2px;
	pointer-events: none;
	white-space: nowrap;
	/* overflow: hidden; */
	display: flex;
	align-items: center;
}

.extension_status_text_icon svg{
	display: inline-flex;
	width: 20px;
	height: 20px;
	margin-right: 6px;
	color: #2dbc15;
}

.extension_status_text_date{
	background: #000000c4;
	border-radius: 3px;
	padding: 2px 5px 3px;
	color: #9e9e9e;
	position: absolute;
	left: -2px;
	top: -32px;
	font-family: 'Radiance';
	font-weight: bold;
}

.extension_status_text_container {
	position: absolute;
	z-index: 1;
	top: 0px;
	height: 32px;
	background: #18181b;
	background: linear-gradient(90deg, #4e4e4e, #18181b);
	border-radius: 4px;
	/* transition: all 0.4s ease-out; */
	transition: left 0.2s ease-out, opacity 0.1s ease-out;
	left: 110px;
	opacity: 0;
}

.extension_status_text span {
}

.extension_status_text_container.visible, .extension_status_box:hover + .extension_status_text_container  {
	/* transform: translateX(0%); */
	opacity: 1;
	left: 100px;
}

span.extension_status_text_icon {
	display: none;
}

.green_status .extension_status_text_container {
	background: linear-gradient(90deg, #31a60a, #18181b);
}

.green_status .extension_status_box {
	background: linear-gradient(135deg, #33ab0b, #0e5000);
	color: #afffaf;
}

.green_status span.extension_status_text_icon {
	display: flex;
}

.red_status .extension_status_text_container {
	background: linear-gradient(90deg, #a60a0a, #18181b);
}

.red_status .extension_status_box {
	background: linear-gradient(135deg, #ab0b0b, #50000e);
	color: #ffafaf;
}

.yellow_status .extension_status_text_container {
	background: linear-gradient(90deg, #a6a60a, #18181b);
}

.yellow_status .extension_status_box {
	background: linear-gradient(135deg, #abab0b, #50500e);
	color: #ffffaf;
}



.bottom_hud .abilities.FourAbilities .ability {
	width: 53px;
	height: 53px;
	margin: 9px 6px;
}

.facets_and_inate_tooltip.tooltip_up .main_tooltip {
	justify-content: flex-start;
}

.talent_box.ogre_learning_curve::before {
	content: '';
	position: absolute;
	width: 54px;
	height: 310px;
	background: url('../images/dota/ogre_talents.png') no-repeat;
	background-size: contain;
	left: 184px;
	top: -20px;
	z-index: 12;
}

.item_enhancement {
	/* display: flex; */
	margin: 10px;
}

.item_enhancement_separator {
	display: flex;
	align-items: center;
	gap: 10px;
}

.item_enhancement_separator_line {
	width: 100%;
	height: 2px;
	background: #334046;
}

.item_enhancement_title {
	letter-spacing: 1px;
	color: #A1ACB2;
}

.item_enhancement_box {}

.item_enhancement_enhancement_title_box {
	display: flex;
	align-items: center;
	gap: 10px;
}

.item_enhancement_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	position: relative;
	overflow: hidden;
	border-radius: 100%;
}

.item_enhancement_name {
	font-family: 'Reaver';
	font-size: 20px;
	text-transform: uppercase;
	color: #F5F5F5;
	font-weight: bold;
}

.item_enhancement_props {
	display: flex;
	flex-direction: column;
	padding: 0px 5px;
}

.item_enhancement_prop {
	margin-top: 5px;
	display: flex;
	align-items: center;
	color: #A6AEB2;
	font-size: 20px;
	gap: 5px;
}

.item_enhancement_prop .prop_number {
	font-weight: bold;
	color: white;
}

.item_enhancement_prop .prop_name {
	padding-top: 2px;
}

/* ARTIFACT TIERS */

.item_heading.tier_1{
	background: linear-gradient(90deg, #5D6162, #2A3236);
}

.item_heading.tier_1 .neutral_tier_label{
	color: #CCCCCC;
}

.item_heading.tier_2{
	background: linear-gradient(90deg, #517B51, #2A3236);
}

.item_heading.tier_2 .neutral_tier_label{
	color: #93E47F;
}

.item_heading.tier_3{
	background: linear-gradient(90deg, #485486, #253040);
}

.item_heading.tier_3 .neutral_tier_label{
	color: #7E93FF;
}

.item_heading.tier_4 {
	background: linear-gradient(90deg, #673b83, #2c2b3d);
}

.item_heading.tier_4 .neutral_tier_label{
	color: #D57CFF;
}

.item_heading.tier_5 {
	background: linear-gradient(90deg, #857959, #3B3E3B);
}

.item_heading.tier_5 .neutral_tier_label{
	color: #FFE196;
}

.video_error_message {
	color: #bdc2c6;
	text-align: center;
	padding: 20px;
	position: absolute;
	width: 100%;
}