.custom_game_overlay.custom_game_ability_arena {
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 100%;
	pointer-events: none;
	display: none;
}

.ability_arena_side_shelf {
	position: absolute;
	right: 0px;
	top: 170px;
	pointer-events: initial;
}

.ability_arena_toast {
	text-align: right;
	position: absolute;
	right: 30px;
	width: 220px;
	bottom: 10px;
	font-size: 18px;
	text-shadow: 0px 1px 2px black, 0px 2px 4px #00000069;
	background: linear-gradient(270deg, #000000b3, transparent);
	border-radius: 0px 9px 0px 0px;
	height: 0px;
	padding: 0px 15px;
	overflow: hidden;
	transition: all 0.2s ease-out;
}

.ability_arena_side_shelf_image {
	background: url(../images/ability_arena/side_menu_shelf.png) no-repeat;
	width: 185px;
	height: 53px;
	position: relative;
	right: -3px;
	cursor: pointer;
}

.ability_arena_side_shelf_image>img {
	position: absolute;
	top: 10px;
	left: 15px;
	transition: all 0.2s ease-out;
}

.ability_arena_side_shelf_image:hover>img {left: 12px;}

.ability_arena_tab_click {
	background: url(../images/ability_arena/tab.png) no-repeat;
	width: 244px;
	height: 49px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Reaver";
	padding-top: 7px;
	cursor: pointer;
	color: #d39d62;
	font-weight: 600;
	letter-spacing: 2px;
}


.ability_arena_tab_click>div{
	display: flex;
	align-items: center;
	justify-content: center;
		filter: grayscale(1);
}

.ability_arena_tabs_menu {
	display: flex;
	width: 100%;
	justify-content: space-evenly;
}

.ability_arena_tabs {
	height: 100%;
	margin-top: -1px;
	border: 1px solid #3e3a70;
	box-shadow: 0px 5px 15px #000000c7;
}

.ability_arena_box {
	display: flex;
	flex-direction: column;
	width: 1070px;
	height: 840px;
	position: absolute;
	right: -1100px;
	top: 90px;
	opacity: 0;
	transition: all 0.25s ease-out;
	pointer-events: initial;
}

.ability_arena_tab {
	display: none;
	width: 100%;
	height: 100%;
	background: #141324;
	position: relative;
}

.ability_arena_tab_click:hover, .ability_arena_tab_click.active {
	background: url(../images/ability_arena/tab_active.png) no-repeat;
}

.ability_arena_tab_click>div>img {
	margin-right: 4px;
}

.ability_arena_tab_click span {

	background: -webkit-linear-gradient(#e7a062, #a2683d);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ability_arena_tab_click:hover>div, .ability_arena_tab_click.active>div{
	filter: none;
}

.ability_arena_tab.active {
	display: block;
}

input#ability_arena_spell_input, input#ability_arena_god_input {
	background: #000000bd;
	border: 1px solid #3e3a70;
	outline: none;
	border-radius: 20px;
	font-size: 18px;
	width: calc(100% - 40px);
	padding: 5px 10px;
	padding-left: 37px;
	color: white;
	font-family: "Radiance";
	margin: 20px;
}

.ability_arena_spell_list, .ability_arena_god_list {
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	height: 700px;
	overflow-y: scroll;
}

.ability_arena_spell {
	width: 315px;
	background-color: #1b1331;
	margin: 16px;
	border: 1px solid #2d2954;
	font-size: 14px;
	line-height: 1.25;
	display: flex;
	flex-direction: column;
	text-align: left;
	box-shadow: 0px 2px 9px 2px #00000080;
}

.ability_arena_header {
	background-color: #231b40;
	width: 100%;
	display: flex;
	align-items: center;
}

img.ability_arena_ability_icon {
	height: 50px;
	width: 50px;
	margin: 4px;
}

.ability_arena_ability_name {
	margin-left: 8px;
	font-size: 18px;
	color: #e1e1e1;
	font-family: "Reaver";
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.ability_arena_separator {
	height: 1px;
	background-color: #383167;
	margin: 4px 8px;
}

.ability_arena_categories {
	color: #6548a0;
	margin: 5px 10px;
}

.ability_arena_ability_description {
	color: #847f90;
	margin: 0 8px;
	font-size: 15px;
}

.ability_arena_ability_values {
	margin: 8px;
}

span.ability_arena_ability_value_desc {
	color: #6548a0;
}

.cooldown-icon {
	background-image: url(../images/ability_arena/cooldown.png);
	background-size: cover;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	margin-right: 8px;
}

.ability_arena_cooldown {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.ability_arena_mana_cd_cost {
	display: flex;
	padding: 0px 8px;
}

.ability_arena_mana_cost {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left: 20px;
}

.mana-cost-icon {
	background: linear-gradient(#00a4db,#007196);
	background-size: cover;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	margin-right: 8px;
}


.super{
	padding: 12px;
	margin-top: 12px;
	font-size: 15px;
	background: linear-gradient(rgba(104,104,193,.1),rgba(31,31,151,.16));
	box-shadow: inset 0 0 15px -5px rgb(98 116 255 / 50%);
}

.gaben {
	padding: 12px;
	margin-top: 12px;
	font-size: 15px;
	box-shadow: inset 0 0 15px -5px rgb(156 104 74 / 50%);
	background: linear-gradient(rgb(246 111 23 / 45%),#391305eb);
}

.ability_arena_search_bar:before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 33px;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url(../images/ability_arena/icon_search.svg);
}

.ability_arena_search_bar {
	position: relative;
}

.sink {
	margin-top: auto;
}

.differences {
	background: linear-gradient(#2b243d,#261e3a);
	color: #b3b9bc;
	padding: 8px;
	margin-top: 12px;
}

.ability_arena_god_card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 394px;
}

.ability_arena_god_content {
	position: absolute;
	top: 0px;
	z-index: 6;
	left: 0px;
	width: 100%;
	height: 100%;
}

.ability_arena_god_avatar {
	position: absolute;
	z-index: 4;
	top: 20px;
	width: 235px;
}

.ability_arena_god_frame {
	position: relative;
	z-index: 5;
}

.ability_arena_god_name {
	position: absolute;
	font-family: "Reaver";
	font-size: 18px;
	/* width: 200px; */
	text-align: center;
	width: 100%;
	top: 32px;
	text-shadow: 0px 1px 2px black;
}

.ability_arena_god_powers {
	position: absolute;
	top: 230px;
	display: flex;
	width: 100%;
	justify-content: center;
}

.ability_arena_god_universe {
	position: absolute;
	bottom: 40px;
	right: 49px;
}

.ability_arena_god_hp {
	font-family: "Reaver";
	font-size: 22px;
	position: absolute;
	bottom: 21px;
	width: 100%;
	color: #ffe097;
	text-shadow: 0 1px 2px #000;
	font-weight: bold;
	padding-left: 22px;
}

.ability_arena_god_power {
	background: url(../images/ability_arena/god_card_ability_frame.png) no-repeat;
	width: 84px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
}

img.ability_arena_god_power_image {
	margin-top: -8px;
	margin-left: -1px;
	width: 65px;
	height: 65px;
}

img.ability_arena_god_avatar_icon {
	width: 100%;
}

img.active_type_frame {
	position: absolute;
	margin-top: -8px;
	margin-left: -1px;
	width: 65px;
	height: 65px;
	display: none;
}

.active_type img.active_type_frame {
	display: block;
}

.ability_arena_god_power_tooltip {
	position: absolute;
	text-align: left;
	background: #1a1930;
	border: 1px solid #36335f;
	width: 360px;
	z-index: 10;
}

.ability_arena_god_power_name {
	background: #2b2a4e;
	font-size: 22px;
	font-family: "Reaver";
	padding: 5px 10px;
}

.ability_arena_tooltips {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ability_arena_god_power_type {http: //localhost:3033/video_overlay.html;;
;http: //localhost:3033/video_overlay.html;;;http: //localhost:3033/video_overlay.html;;;color: #6548a0;
 margin: 5px 10px;;}

.ability_arena_god_power_value {
	color: #6548a0;
	margin: 5px 10px;
	display: flex;
}

.ability_arena_god_power_value_name {
	margin-right: 6px;
	white-space: nowrap;
}

.ability_arena_god_power_value_value {
	color: white;
}

.ability_arena_god_power_description {color: #847f90;margin: 8px 10px;font-size: 15px;}

.ability_arena_about_section {
	padding: 160px 270px;
	text-align: left;
	/* max-width: 470px; */
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: end;
	flex-direction: column;
	align-items: center;
	background: linear-gradient(360deg, #000000b8, transparent);
	color: #b8b2d6;
	font-size: 18px;
	text-shadow: 0px 1px 2px black;
}

.button {}

.ability_arena_external_link {
	color: #c3915b;
	text-decoration: none;
	margin-bottom: 10px;
	padding: 10px 20px;
	background: #0000008c;
	display: inline-block;
	margin-right: 10px;
	border: 1px solid;
}

.ability_arena_external_link:hover {
	color: white;
}

img.ability_arena_logo {
	margin: 20px 40px;
	display: block;
	max-width: 150px;
}

.ability_arena_tab.tab_about {
	background: url(https://dotatooltips.b-cdn.net/ability_arena/ability_arena_splash_art.jpg) #141324 no-repeat;
	background-size: cover;
}

.ability_arena_about_section>div {}

.ability_arena_menu {
	position: absolute;
	right: 0px;
}

.ability_arena_menu_box {
	width: 90px;
	height: 90px;
	background: #000000b3;
	padding: 20px;
	/* border-bottom: 3px solid #dfc029; */
	cursor: pointer;
	transform: translateX(110%);
	position: relative;
	transition: all 0.2s ease-out;
}

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

.ability_arena_toast_new {
	color: #ea81e4;

	animation: jump 0.5s ease-in-out infinite alternate;
}

@keyframes jump {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-4px);
	}
}






.ability_arena_open_close_button {
	position: absolute;
	bottom: -17px;
	height: 24px;
	background: #dfc029;
	width: 100%;
	left: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ability_arena_menu_box:hover {
	background: #000000cc;
}

img.ability_arena_open_close_icon {
	transition: all 0.15s ease-out;
	margin-left: 0px;
}

.ability_arena_menu_box:hover img.ability_arena_open_close_icon {
	
	margin-left: -5px;
}

.ability_arena_box.open {
	right: 190px;
	opacity: 1;
}


.ability_arena_menu_box.open img.ability_arena_open_close_icon {
	transform: rotateZ(180deg);
}

.custom_game_overlay.custom_game_ability_arena.enabled {
	display: block;
}

.ability_arena_menu_box.open, .hovering .ability_arena_menu_box, .reveal_toast .ability_arena_menu_box{
	transform: translateX(-30px);
}

.reveal_toast .ability_arena_toast {
	padding: 10px 15px;
	height: 90px;
}

.ability {}