body {
	--tint: 0;
	--saturation: 0%;

 	--background_black: #000;

 	--color_fixed_white: #fff;
	--color_fixed_black: #000;
 	--color_gray_1: #4d4d4d; 
 	--color_gray_2: #808080;
 	--color_gray_3: #999;
	--color_gray_4: #b3b3b3;
 	--color_gray_5: #cccccc;
 	--color_gray_6: #e6e6e6;

 	--nav_header_background: #000;
	--nav_item_color: #e6e6e6; 
	--nav_item_background_hover: #333333;
	--nav_search_color: #fff;

 	--header_notify_text: #cccccc; 
 	--header_notify_date: #999999;

 	--notification_color: #fff;
 	--notification_background: #ff3333;

 	--scrollbar_dark_background: hsl(0, 0%, 30%);
	--scrollbar_dark_color: hsl(0, 0%, 50%);
	--scrollbar_dark_color_hover: hsl(0, 0%, 60%);

	--link_header: #fff; 
 	--link_header_hover: #bfbfbf; 
 	--link_red: #cc0099; 
	--link_red_hover: #990073;
 	--link_text: #3399ff; 
	--link_text_hover: #0080ff;

	--check_user_confirm: #018852;
	--check_user_reject: #eb0400;	

 	--stats_color: #999999;
 	--timeline_color: hsl(0, 0%, 20%);

 	--thumb_border: #b0c5e2;
	--thumb_border_hover: #bed7e1;

 	--search_counter_background: #3366ff;

 	--alert_background: #cc0033;
 	--alert_link_color_hover: #e6e6e6;

	--button_gray_color: #fff;
	--button_gray_background: #999999;
	--button_gray_background_hover: #808080;

	--button_pink_color: #fff;
	--button_pink_background: #cc0099;
	--button_pink_background_hover: #990073;

	--button_purple_color: #fff;
	--button_purple_background: #9933ff;
	--button_purple_background_hover: #8000ff;

	--button_green_color: #000;
	--button_green_background: #33ffcc;
	--button_green_background_hover: #00ffbf;

	--button_blue_color: #fff;
	--button_blue_background: #33ccff;
	--button_blue_background_hover: #00bfff;

	--button_active_color: #fff;
	--button_active_background: #ff99e6; 
	--button_active_background_hover: #ff99e6; 

	--button_white_color: #000;
	--button_white_background: #fff;
	--button_white_background_hover: #e6e6e6;

	--button_transparent_dark_color: #e6e6e6;
	--button_transparent_dark_background_hover: #333333;

	--button_red_background: #ff4f4d;
	--button_red_background_hover: #ffaaa8;
	--button_red_background_completed: #ffdcdb;

	--listing_color: var(--link_red);
 	--listing_background: 0;
	--listing_color_hover: var(--button_transparent_color_hover);
	--listing_background_hover: var(--button_transparent_background_hover);
	--listing_inactive_color: var(--button_color_inactive);
	--listing_inactive_background: 0;
 	--listing_current_color: var(--button_pink_color);
	--listing_current_background: var(--button_pink_background);

	--menu_dark_divider: hsl(var(--tint), var(--saturation), 25%);
	--menu_dark_line: #000;

	--promote_background: #6600cc;

	--calendar_item: #808080;

	--avatar_select: #ff0040;

	--title_color: #b366ff;
 	--admin_color: #ff0040;
 	--warning_color: #ffbf00;
 	--note_color: #668cff;
 	--hint_color: #ffbf00;
 	--deleted_color: #ff4f4d;
 	--hot_color: #ffbf00;
 	--notify_backgroud: #ffb31a;
 	--xp_color: #ae1392;
 	--token_color: #ffb31a;
 	--voucher_color: #cc99ff;
 	--gamemoney_color: #00cc44;
 	--premium_color: #aa00ff;
 	--banned_color: #ff0000;

 	--highlight_player_background: #ffbf00;
 	/*--highlight_player_background_hover: #cc9900;*/
 	--highlight_player_color: #000;

 	--highlight_background: linear-gradient(233deg, #237287 23.91%, #246C84 33.21%, #265F7C 42.51%, #274F72 51.8%, #284367 61.1%, #283A5F 70.4%, #28375C 79.7%); /*linear-gradient(to bottom, hsl(225 50% 40% / 1), hsl(225 50% 20%));*/
 	--highlight_header: hsl(225 50% 15% / 1);

 	--online_background: hsl(150, 100%, 50%);  /*#00f593*/
	--away_background: #ffb31a; 
	--offline_background: #808080; 
	--busy_background: #ff4f4d;

	--form_border: #808080; 

 	--footer_background: #000;
	--footer_color: #999999;
	--footer_color_hover: #fff;

	--error_background: #ff6666; 
	--error_color: #fff;

	--filter_dark_color: #fff;

	--quote_border: #808080;

	--allsizes_color: #e6e6e6;
	--allsizes_stats: #a6a6a6;

	--error_page_color: #0066cc;

	--map_background: #fff; 
	--map_control: #fff; 
	--map_control_hover: #f1f1f1; 
	--map_control_border: #000; 
	--map_tickbox: #000; 
	--map_marker_border: #000; 
	--map_marker_color: #fff;
	--map_info_background: #1a1a1a; 
	--map_info_color: #e6e6e6; 

	--info_light_background: #1a1a1a; 
	--info_light_color: #e6e6e6;

	--chat_item_value_color: #b3b3b3;
	--chat_item_value_color_hover: #b3b3b3;
	/*--chat_item_background_hover: #fff3e6;
	--chat_item_background_select: #ffcc99;*/
	--chat_item_color_select: #4d4d4d;
	--chat_item_color_hover: #4d4d4d;

	--tab_item_select_background: #33ccff; 
	--tab_item_select_background_hover: #33ccff; 
	--tab_item_select_color: #fff; 
	--tab_item_select_color_hover: #fff; 

	--sticked_color: #cc6600;

	--forum_tag_color: #fff;

	--media_background: #000; 
	--media_header_link_hover: #e6e6e6;

	--video_length_background: #000; 
	--video_length_color: #fff;

	--upload_bar_background: #0066ff;

	--quiz_answer_background: #fff;
	--quiz_answer_color: #000; 
	--quiz_answer_background_hover: #e6e6e6; 
	--quiz_answer_color_hover: #000; 
	--quiz_color: #fff; 
	--quiz_correct_background: #00d500; 
	--quiz_wrong_background: #ff0000;

	--contest_remaining: #ff0040;
	--achievement_locked_background: #cccccc;
	--ranked_background: hsl(150, 100%, 50%); /*#00ff99*/
	--new_background: #eb0400;

	--bar_dark_background: hsl(var(--tint), var(--saturation), 25%); /*#4d4d4d*/

	--shop_advertisement: #9900cc;
	--shop_advertisement_hover: #ff0040;

	--confirm: #6ac020;
	--reject: #ff4f4d;
}

/* THEME */
body {
	--page_background: hsl(210, 25%, 90%);
 	--background: hsl(0, 0%, 100%);
 	
 	--item_background: hsl(0, 0%, 95%);
 	--item_background_hover: hsl(0, 0%, 90%);

 	/*--tag_background_hover: #e6e6e6;*/
 	
 	--color_text: #000;
 	--color_white: #fff;
 	--color_black: #000;

 	--link_default: #4d4d4d;
 	--link_default_hover: #000;

 	--button_color: #000;
	--button_background: #e6e6e6;
	--button_color_hover: #000;
	--button_background_hover: #cccccc;
	--button_color_inactive: #cccccc;
	--button_background_inactive: #f2f2f2;

	--button_transparent_dark_background_hover: #333333;

 	--button_transparent_color: #000;
	--button_transparent_background: 0;
	--button_transparent_color_hover: #000;
	--button_transparent_background_hover: #e6e6e6;

	--menu_dark_background: #262626;
	--menu_dark_button_background_hover: #404040;
	--menu_dark_nav_background: #333333;
	--menu_dark_nav_color_hover: #4d4d4d;

 	--helper_color: #99cc00;
 	--bonus_background: #f5f500;

 	--green: #00cc00;
	--turquoise: #00cccc; 
	--blue: #0080ff; 
	--orange: #ff8000; 
	--red: #ff0000; 
	--pink: #ff0080; 
	--purple: #bf00ff; 
	--black: #000; 
	--yellow: #cccc00;
	--mint: #00cc66;
	--lime: #66cc00;

 	--form_color: #000; 
 	--form_checkbox: #000;

 	--error_page_background: #e5f2ff;

 	--dialog_background: #e6f2ff; 
	--dialog_header_color: #333; 
	--dialog_form_color: #333; 
	--dialog_color: #333; 
	--dialog_input_background: #fff;

	--info_background: #1a1a1a; 
	--info_color: #e6e6e6;

	--tab_item_background: 0; 
	--tab_item_color: #000;
	--tab_item_background_hover: #e6e6e6; 
	--tab_item_color_hover: #000;

	--filter_dark_background: #262626;

	--expand_background: #d9d9d9;

	--locked_color: hsl(0, 0%, 60%);
	--forum_signature_color: #999999;
	--forum_signature_border: #f2f2f2;

	--screenshotsize_background: var(--page_background); 
	--screenshotsize_back_background: #1c2837; 
	--screenshotsize_back_color: #fff;
	--screenshotsize_back_color_hover: #e6e6e6;
	--screenshotsize_container_background: #c5dce5; 
	--screenshotsize_container_border: #49b1f4; 
	--screenshotsize_container_color: #1c3b5c; 
	--screenshotsize_container_color_hover: #417aae; 
	--screenshotsize_container_active_background: #dee6ed; 
	--screenshotsize_container_active_color_hover: #1c3b5c; 
	--screenshots_embed_background: #eef5fa;
	--screenshots_embed_border: #eef5fa;
	--screenshots_embed_color: #333;

	--media_header_gray: #262626;
	--media_tag_background: #e6e6e6;
	--media_tag_color: #4d4d4d;
	--media_tag_background_hover: #cccccc;

	--forum_tag_background: #999999;

	--chat_color: #4d4d4d;
	/*--chat_item_background: #f2f2f2;*/
	--chat_item_color: #4d4d4d;

	--upload_color: #00cc99;  

 	--lottery_ticket_color: var(--stats_color);

	--graph_color: #000;
	--graph_fill: #99ccff;
	--graph_background: #e6e6e6;

	--activity_background: #e5f2ff;
	--activity_color: #99ccff;

	--scrollbar_background: hsl(0, 0%, 90%);
	--scrollbar_color: hsl(0, 0%, 60%);
	--scrollbar_color_hover: hsl(0, 0%, 50%);

	--friends_title_background: #333333;
	--friends_title_background_hover: #000;

	--shop_discount_color: #cc0033;
	--shop_price_previous: #999;
	--shop_bonus_background: #aa00ff;
	--pay_background: #ffbf00;

	--upload_preview_border: #808080;

	/*--profile_level_background: #364d63;*/
	--profile_level_background: hsl(210, 30%, 30%); /*linear-gradient(180deg, hsl(210, 30%, 40%), hsl(210, 30%, 20%))*/

	--contest_prize_background: #ffbf00;
	--contest_timeline_background: #ccc;
	--contest_timeline_point_background: #999999;

	--highlight_link_color: rgba(145, 223, 236, 1); /*#ccc*/
	--highlight_link_color_hover: #fff; /*#b3b3b3*/
	--highlight_stats_color: #cccccc;

	--lottery_purchased_background: var(--item_background); /*#6666cc*/
	--lottery_purchased_background_hover: var(--item_background_hover); /*#4040bf*/

	--star_color: #cccccc;
	--star_color_hover: #ffbf00;

	--thumb_likes_background: hsl(210, 50%, 40%); /*#336699*/ /*linear-gradient(180deg, hsl(210, 50%, 40%), hsl(210, 50%, 20%))*/

	--video_icon_color: #66cc00;
	--quiz_icon_color: #ff00bf;
	--screenshot_icon_color: #00bfff;
	--poll_icon_color: #80ff00;
	--news_icon_color: #cc0033;
	--game_icon_color: #00cccc;
	--server_icon_color: #aa00ff;
	--blog_icon_color: #3366ff;
	--contest_icon_color: #ffbf00;

	--forum_tag_green: hsl(120, 100%, 80%);
	--forum_tag_yellow: hsl(45, 100%, 80%);
	--forum_tag_red: hsl(0, 100%, 80%);
	--forum_tag_pink: hsl(300, 100%, 80%);
	--forum_tag_blue: hsl(225, 100%, 80%);
	--forum_tag_purple: hsl(255, 100%, 80%);

	--delta_up: hsl(150, 100%, 50%); /*#00f593*/
	--delta_down: #ffb31a;

	--forum_rules_background: #6600cc;

	--map_legend_background: rgba(255, 255, 255, 0.75);
	--map_legend_color: #000; 
	--map_legend_button: #4b4b4b; 
	--map_legend_button_hover: #000; 
}

.DarkMode, .PurpleMode, .BlueMode {
	--page_background_lightness: 5%; /* 5% */
	--background_lightness: 15%; /* 10% */
	--item_background_lightness: 20%; /* 15% */
	--item_background_hover_lightness: 25%; /* 20% */
	--activity_background_lightness: 20%; /* 20% */

	--button_background_inactive_lightness: 25%; /* 20% */
	--button_background_lightness: 30%; /* 25% */
	--button_background_hover_lightness: 35%; /* 30% */

	--tag_lightness: 30%; /* 20% */
	--tag_hover_lightness: 35%; /* 25% */

	--page_background: hsl(var(--tint), var(--saturation), var(--page_background_lightness));
 	--background: hsl(var(--tint), var(--saturation), var(--background_lightness));
 	
 	--item_background: hsl(var(--tint), var(--saturation), var(--item_background_lightness));
 	--item_background_hover: hsl(var(--tint), var(--saturation), var(--item_background_hover_lightness));

 	/*--tag_background_hover: hsl(var(--tint), var(--saturation), 15%);*/

 	--color_text: #cccccc;
 	--color_white: #cccccc;
 	--color_black: #fff;

 	--link_default: #fff;
 	--link_default_hover: #e6e6e6;

	--button_color: #e6e6e6;
	--button_color_hover: #e6e6e6;
	--button_color_inactive: #808080;
	--button_background: hsl(var(--tint), var(--saturation), var(--button_background_lightness));
	--button_background_hover: hsl(var(--tint), var(--saturation), var(--button_background_hover_lightness));
	--button_background_inactive: hsl(var(--tint), var(--saturation), var(--button_background_inactive_lightness));

 	--button_transparent_color: #e6e6e6;
	--button_transparent_background: 0;
	--button_transparent_color_hover: #e6e6e6;
	--button_transparent_background_hover: hsl(var(--tint), var(--saturation), var(--button_background_inactive_lightness));

	--menu_dark_background: hsl(var(--tint), var(--saturation), var(--background_lightness));
	--menu_dark_button_background_hover: hsl(var(--tint), var(--saturation), var(--button_background_inactive_lightness));
	--menu_dark_nav_background: hsl(var(--tint), var(--saturation), var(--item_background_lightness));
	--menu_dark_nav_color_hover: hsl(var(--tint), var(--saturation), var(--button_background_hover_lightness));

 	--helper_color: #ccff33;
 	/*--bonus_background: #ffbf00;*/

 	--green: #00cc00; 
	--turquoise: #00ffff; 
	--blue: #0080ff; 
	--orange: #ff8000; 
	--red: #ff0000; 
	--pink: #ff0080; 
	--purple: #bf00ff; 
	--black: #000; 
	--yellow: #ffff00;
	--mint: #00ff80;
	--lime: #80ff00;

 	--form_color: #fff; 
 	--form_checkbox: #fff;

	--error_page_background: #cce6ff; 

 	--dialog_background: hsl(var(--tint), var(--saturation), var(--background_lightness)); 
	--dialog_header_color: #e6e6e6; 
	--dialog_form_color: #e6e6e6; 
	--dialog_color: #e6e6e6; 
	--dialog_input_background: var(--dialog_background);

	--info_background: #e6e6e6; 
	--info_color: #1a1a1a; 

	--tab_item_background: 0; 
	--tab_item_color: #fff; 
	--tab_item_background_hover: hsl(var(--tint), var(--saturation), var(--button_background_inactive_lightness));
	--tab_item_color_hover: #fff; 

	--filter_dark_background: hsl(var(--tint), var(--saturation), var(--background_lightness));

	--expand_background: hsl(var(--tint), var(--saturation), var(--button_background_inactive_lightness));
	--timeline_color: hsl(var(--tint), var(--saturation), var(--button_background_inactive_lightness));

	--locked_color: hsl(0, 0%, 60%);
	--forum_signature_color: #808080;
	--forum_signature_border: hsl(var(--tint), var(--saturation), var(--item_background_lightness));

	--screenshotsize_background: #808080; 
	--screenshotsize_back_background: #000; 
	--screenshotsize_back_color: #fff;
	--screenshotsize_back_color_hover: #e6e6e6;
	--screenshotsize_container_background: #4d4d4d; 
	--screenshotsize_container_border: #808080; 
	--screenshotsize_container_color: #fff; 
	--screenshotsize_container_color_hover: #e6e6e6; 
	--screenshotsize_container_active_background: #808080; 
	--screenshotsize_container_active_color_hover: #fff; 
	--screenshots_embed_background: #808080;
	--screenshots_embed_border: #808080;
	--screenshots_embed_color: #fff;

	--media_header_gray: hsl(var(--tint), var(--saturation), var(--background_lightness));
	--media_tag_background: hsl(0, 0%, var(--tag_lightness));
	--media_tag_color: hsl(0, 0%, 80%);
	--media_tag_background_hover: hsl(0, 0%, var(--tag_hover_lightness));

	--forum_tag_background: #595959;

	--map_tickbox: #fff; 

	--chat_color: #999;
	/*--chat_item_background: hsl(var(--tint), var(--saturation), var(--item_background_lightness));*/
	--chat_item_color: #e6e6e6;

	--upload_color: #00ffbf;

 	--lottery_ticket_color: var(--stats_color);

	--graph_color: #fff;
	--graph_fill: #0066cc;
	--graph_background: hsl(var(--tint), var(--saturation), var(--item_background_lightness));

	--activity_background: hsl(var(--tint), var(--saturation), var(--activity_background_lightness));
	--activity_color: hsl(0, 0%, 90%);

	--scrollbar_background: hsl(0, 0%, 30%);
	--scrollbar_color: hsl(0, 0%, 50%);
	--scrollbar_color_hover: hsl(0, 0%, 60%);

	--friends_title_background: hsl(var(--tint), var(--saturation), var(--item_background_lightness));
	--friends_title_background_hover: hsl(var(--tint), var(--saturation), var(--item_background_hover_lightness));

	--map_legend_background: rgba(0, 0, 0, 0.75);
	--map_legend_color: #fff; 
	--map_legend_button: #4b4b4b; 
	--map_legend_button_hover: #000;
}

.PurpleMode {
	--tint: 270 !important;
	--saturation: 20% !important;

	/*--page_background: hsl(270, 20%, 5%);*/
 	/*--background: hsl(270, 20%, var(--background_lightness));*/

 	/*--item_background: hsl(270, 20%, 15%);
 	--item_background_hover: hsl(270, 20%, 20%);*/

	/*--button_background: hsl(270, 20%, 25%);
	--button_background_hover: hsl(270, 20%, 30%);
	--button_background_inactive: hsl(270, 20%, 20%);*/

 	/*--button_transparent_background_hover: hsl(270, 20%, 20%);*/

 	/*--dialog_background: hsl(270, 20%, var(--background_lightness)); */

 	/*--tag_background_hover: hsl(270, 20%, 15%);*/

	/*--menu_dark_background: hsl(270, 20%, 15%);
	--menu_dark_button_background_hover: hsl(270, 20%, 25%);
	--menu_dark_nav_background: hsl(270, 20%, 20%);
	--menu_dark_nav_color_hover: hsl(270, 20%, 30%);*/
	/*--menu_dark_divider: hsl(270, 20%, 25%);*/

	/*--filter_dark_background: hsl(270, 20%, var(--background_lightness));*/
	/*--media_header_gray: hsl(270, 20%, var(--background_lightness));*/

 	/*--tab_item_background_hover: hsl(270, 20%, 20%);*/

 	/*--activity_background: hsl(270, 20%, 20%);*/

 	/*--chat_item_background: hsl(270, 20%, 15%);*/

 	/*--friends_title_background: hsl(270, 20%, 15%);
	--friends_title_background_hover: hsl(270, 20%, 20%);*/

	/*--expand_background: hsl(270, 20%, 20%);
	--timeline_color: hsl(270, 20%, 20%);*/

	/*--graph_background: hsl(270, 20%, 15%);*/
	/*--bar_dark_background: hsl(270, 20%, 25%);*/

	/*--forum_signature_border: hsl(270, 20%, 15%);*/

	/*--highlight_background: linear-gradient(to bottom, hsl(255 50% 40% / 1), hsl(255 50% 20%));
 	--highlight_header: hsl(255 50% 15% / 1);*/
}

.BlueMode {
	--tint: 225 !important;
	--saturation: 20% !important;

	/*--page_background: hsl(225, 20%, 5%);*/
 	/*--background: hsl(225, 20%, var(--background_lightness));*/

 	/*--item_background: hsl(225, 20%, 15%);
 	--item_background_hover: hsl(225, 20%, 20%);*/

	/*--button_background: hsl(225, 20%, 25%);
	--button_background_hover: hsl(225, 20%, 30%);
	--button_background_inactive: hsl(225, 20%, 20%);*/

 	/*--button_transparent_background_hover: hsl(225, 20%, 20%);*/

 	/*--dialog_background: hsl(225, 20%, var(--background_lightness)); */

 	/*--tag_background_hover: hsl(225, 20%, 15%);*/

	/*--menu_dark_background: hsl(225, 20%, 15%);
	--menu_dark_button_background_hover: hsl(225, 20%, 25%);
	--menu_dark_nav_background: hsl(225, 20%, 20%);
	--menu_dark_nav_color_hover: hsl(225, 20%, 30%);*/
	/*--menu_dark_divider: hsl(225, 20%, 25%);*/

	/*--filter_dark_background: hsl(225, 20%, var(--background_lightness));*/
	/*--media_header_gray: hsl(225, 20%, var(--background_lightness));*/

 	/*--tab_item_background_hover: hsl(225, 20%, 20%);*/

 	/*--activity_background: hsl(225, 20%, 20%);*/

 	/*--chat_item_background: hsl(225, 20%, 15%);*/

 	/*--friends_title_background: hsl(225, 20%, 15%);
	--friends_title_background_hover: hsl(225, 20%, 20%);*/

	/*--expand_background: hsl(225, 20%, 20%);
	--timeline_color: hsl(225, 20%, 20%);*/

	/*--graph_background: hsl(225, 20%, 15%);*/
	/*--bar_dark_background: hsl(225, 20%, 25%);*/

	/*--forum_signature_border: hsl(225, 20%, 15%);*/
}
/* THEME */

/* VARS */
body {
	--input_border_radius: 4px;
	--border_radius: 5px; 	
	--avatar_rounded: 100%; 
	/*--last_post_rounded: 14px; 
	--last_post_rounded_right: 14px;*/
	/*--button_gradient_direction: 90deg; */
	/*--background_granularity: 25rem;*/

	--messages_height: 45px;

	--module_gap: 30px; /* 15px */
	--container_gap: 30px; /* 15px */
	--item_gap: 15px; /* 10px */
	--post_gap: 5px; /* 5px */
	--post_form_gap: 30px; /* 10px */
	--profile_gap: 50px; /* 30px */
	--chat_item_gap: 5px;
	--dialog_gap: 10px; /* 5px */

	--footer_padding: 60px; /* 30 px */
	--module_padding: 30px; /* 15px */
	--container_padding: 30px; /* 15px */
	--item_padding: 15px; /* 10px */
	--post_padding: 15px; /* 10px */
	--highlight_header_padding: 20px; /* 15px */
	--highlight_padding: 30px; /* 15px */
	--tab_padding: 15px; /* 10px */
	--profile_padding: 30px; /* 15px */
	--menu_padding: 15px; /* 10px */
	--comment_padding: 10px; /* 5px */
	--chat_item_padding: 10px;

	--spacing: 15px; /* 10px */
	--button_spacing: 10px; /* 5px */
	--item_spacing: 15px; /* 10px */
	--list_spacing: 10px; /* 5px */
	--column_spacing: 20px; /* 15px */
	--tab_spacing: 5px; /* 5px */

	--nav_height: 60px;
	--news_bar_height: 40px;

	--tab_layout: 1;
	--videos_layout: 5;
	--games_layout: 8;
	--downloads_layout: 2;
	--shop_layout: 5;
	--polls_layout: 2;
	--lottery_layout: 10;
	--invite_layout: 3;
	--leaderboards_layout: 8;
	--users_layout: 5;
	--column_layout: 1;
}
/* VARS */

/* CHAT */
/*body {
	--chat_panel_rooms: 5;
	--chat_panel_users: 5;
	--chat_messages: 18;

	--chat_item_height: 20px;
	--chat_item_padding: 10px;
	--chat_item_gap: 5px;
	--chat_input_height: 30px;

	--chat_rooms_height: calc(var(--chat_panel_rooms) * (var(--chat_item_height) + var(--chat_item_padding) * 2) + calc(var(--chat_panel_rooms) - 1) * var(--chat_item_gap));
	--chat_users_height: calc(var(--chat_panel_users) * (var(--chat_item_height) + var(--chat_item_padding) * 2) + calc(var(--chat_panel_users) - 1) * var(--chat_item_gap));
	--chat_window_height: calc(var(--chat_rooms_height) + var(--chat_users_height) - var(--container_padding) * 2 - var(--chat_input_height) - var(--module_gap) - var(--container_gap) - 27px);
}*/
/* CHAT */

/* HTML */
/*@font-face {
  src: url(/fonts/font500.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-family: "font500";
}

@font-face {
  src: url(/fonts/font700.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-family: "font700";
}*/

/*@font-face{
	font-family: Addon Sans;
	font-weight: 400;
	font-style: normal;
	font-display: wap;
	src: url(/fonts/addon_sans_regular.woff2) format("woff2")
}

@font-face{
	font-family: Addon Sans;
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url(/fonts/addon_sans_bold.woff2) format("woff2")
}*/

@font-face{
	font-family:Inter;
	font-style:normal;
	font-weight:400;
	src: url(/fonts/inter-latin-400-normal-10194357ec5e44ae1777.woff) format("woff");
}

@font-face{
	font-family: Inter;
	font-style: normal;
	font-weight: 600;
	src: url(/fonts/inter-latin-600-normal-5a87f7c487cd10f7fccc.woff) format("woff");
}
@font-face{
	font-family: Inter;
	font-style: normal;
	font-weight: 700;
	src: url(/fonts/inter-latin-700-normal-9bbc3125d4caf98e62a2.woff) format("woff");
}

html {
  text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

body {
	font-family: Inter, helvetica, arial, tahoma; 
	font-size: 1.0rem; 
	margin: 0; 
	background-color: var(--page_background); 
	background-repeat: no-repeat;
	background-position: top center; 
	background-attachment: fixed; 
	width: 100%; 
	height: auto; 
	float: left; 
	position: relative;
	--page_width: 100rem;
	background-image: linear-gradient(223.17deg,#1c1829,#1b1828 8.61%,#191724 17.21%,#161520 25.82%,#14131c 34.42%,#121218 43.03%,#111117 51.63%);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
}

h2, h3 {
	float: left;
}

h2 {
	width: 100%;
	font-size: 1.4rem;
	font-weight: bold;
	text-transform: uppercase;
}

h3 {
	font-size: 1.2rem;
	font-weight: bold;
}

h4 {
	font-size: 1.0em;
	font-weight: bold;
}

p {
	margin: 0; 
	float: left;
	width: 100%;
	color: var(--color_text);
	font-size: 1.0rem;
	font-weight: normal;
	line-height: 1.5em;
}

p:empty {
	display: none;
}

img {
	border: none; 
}

textarea {
	font-size: 1.0rem;
	font-family: Inter, helvetica, arial, tahoma;
	outline: none;
	height: auto;
	margin: 0;
  height: 1.5em;
  line-height: 1.5em;
  padding: 10px;
  width: calc(100% - 2px - 20px);
  float: left;
  resize: none;
}

input, select, textarea {
	border: 1px solid var(--form_border); 
	color: var(--form_color); 
	background: 0; 
	font-family: Inter, helvetica, arial, tahoma; 
	outline: none; 
}

option {
	background: var(--background);
}

input, textarea, select {
	border-radius: var(--input_border_radius); 
}

input {
	width: calc(100% - 20px - 2px);
	height: 28px;
	padding: 0 10px;
	background: 0;
	font-size: 1.0rem;
}

select {
	width: 100%;
	height: 30px;
	padding: 0 5px;
	font-size: 1.0rem;
}

label {
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--form_color); 
	display: inline-block;
}

label:empty {
	display: none !important;
}

svg {
  height: 1.2em; 
  vertical-align: text-top;
  fill: currentColor;
  flex-shrink: 0;
}

a {
	text-decoration: none;
	color: var(--link_default);
	font-weight: bold;
}

a:hover {
	text-decoration: none;
	color: var(--link_default_hover);
}

strong {
	font-weight: bold;
}

button {
	border: 0;
	background: 0;
	float: left;
	padding: 0;
	font-size: 1.0rem;
	margin: 0;
	font-family: Inter, helvetica, arial, tahoma;
	cursor: pointer;
	font-weight: bold;
}

ul {
	float: left;
	margin: 0;
	padding: 0;
	list-style-position: outside;
}

li {
	font-size: 1.0rem;
	line-height: 2.0em;
	float: left;
	width: 100%;
	list-style: none;
}

li::before {
	content: '\25A0';
  color: var(--link_red);
  margin-right: 0.5em;
  transform: translate(0, -0.1em);
  display: inline-block;
}

.Intendation {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.25rem 2.0rem;
}
/* HTML */

/* AUTO INSERT */
.AutoInsert {
	display: none; 
	position: fixed; 
	z-index: 4; 
	bottom: 70px; 
	left: 0; 
	background: var(--menu_dark_background); 
	padding: var(--menu_padding); 
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0px 8px rgba(0, 0, 0, 0.4); 
	border-radius: var(--border_radius); 
	width: 340px; 
}

.AutoInsert span {
	flex-grow: 3; 
}

.AutoInsert a {
	float: left; 
	clear: none; 
	padding: 10px; 
	width: calc(50% - 20px); 
	border-radius: 4px; 
  font-weight: normal; 
  color: var(--nav_item_color); 
  font-size: 1.0rem; 
}

.AutoInsert a:hover {
	color: var(--nav_item_color); 
	background: var(--menu_dark_button_background_hover); 
}

.AutoInsert .autoinsert_group a {
	width: calc(100% - 20px); 	
	clear: both; 
}

.AutoInsert .autoinsert_select_group {
	display: none; 
}

.AutoInsert p {
	display: none; 
}

.AutoInsert svg {
    margin-right: 5px; 
}
/* AUTO INSERT */

/* HEADER */
#HeaderWrap {
	width: 100%; 
	margin: auto; 
	position: fixed; 
	top: 0;
	left: 0;
	min-height: var(--nav_height);
	background: var(--nav_header_background);
	display: flex;
  justify-content: center;
	z-index: 999;
	flex-wrap: wrap;
}

#Header {
	width: calc(100% - 30px);
  padding: 0 15px;
	height: var(--nav_height); 
	position: relative; 
	font-size: 0; 
	display: flex; 
	align-items: center; 
	_max-width: var(--page_width);
	display: flex;
	gap: 5px;
}

.HeaderRight {
	margin-left: auto; 
	display: flex;
	gap: 5px;
}

.HeaderLogo a {
	display: inline-block; 
	padding: 15px 0;
	height: 100%; 
	color: var(--color_fixed_white);
	margin-right: 15px;
}

.HeaderLogo a svg {
	height: 20px; 
}

.HeaderLogo span {
	position: absolute; 
	left: -9999px; 
}

#Header .AllSizes {
	top: 40px; 
}

#Header .AllSizes .NavLink {
	border-radius: 4px; 
}

#Header .HeaderRight .AllSizes {
	right: 0; 
	left: auto; 
}

#Header .HeaderProfile {
	position: relative; 
	height: 30px; 
	margin-left: 5px;
}

#Header .HeaderProfileTitle {
	float: left; 
	width: 100%; 
}

#Header .HeaderProfileTitle img {
	width: 48px; 
	height: 48px; 
	border-radius: 50%; 
	float: left; 
}

#Header .HeaderProfileTitle a {
	background: none !important; 
	padding: 0 !important;
	width: 100% !important;
	height: auto;
}

#Header .HeaderProfileTitle span {
	float: left; 
	clear: none; 
	width: calc(100% - 48px - 10px); 
	line-height: 16px; 
	margin-left: 10px; 
	font-size: 1.0rem; 
}

#Header .HeaderProfileData {
	font-size: 0.8rem !important; 
	color: var(--allsizes_stats);
}

#Header .HeaderProfileData svg {
	margin-right: 0 !important; 
}

#Header .HeaderFriend {
	float: left; 
	width: 100%; 
	height: 30px; 
}

#Header .HeaderFriend {
	width: calc(100% - 20px); 
}

#Header .HeaderFriend span {
	float: left; 
	clear: none; 
}

#Header .HeaderFriend .HeaderFriendName {
	width: auto; 
	line-height: 30px; 
	margin-left: 10px; 
}

#Header .HeaderCounter {
	position: absolute; 
	bottom: 0; 
	right: 0; 
	width: 14px; 
	height: 14px; 
	text-align: center; 
	line-height: 14px; 
	font-style: normal; 
	font-size: 0.6rem; 
	color: var(--notification_color); 
	background: var(--notification_background);
	border-radius: 50%; 
}

#Header .Online {
	background: var(--online_background); 
	color: var(--color_fixed_black);
}

#Header .NoMessages {
	float: left; 
	color: var(--header_notify_text); 
	font-size: 0.8rem !important; 
	line-height: 40px; 
	padding: 10px; 
	white-space: normal; 
	text-align: center; 
	width: calc(100% - 20px); 
}
/* HEADER */

/* NAV */
.NavItem {
	display: inline-block; 
	height: 30px; 
	position: relative; 
}

.NavItem .TransparentButton {
	color: var(--nav_item_color) !important;
}

.NavItem .TransparentButton:hover {
	background: var(--menu_dark_button_background_hover) !important;
	color: var(--nav_item_color) !important;
}

.NavLink {
	color: var(--nav_item_color); 
	font-size: 1.0rem; 
	font-weight: bold; 
	text-transform: uppercase; 
	padding: 0 12px; 
	border-radius: 5px; 
	display: inline-block; 
	line-height: 30px; 
}

.NavLink:hover {
	color: var(--nav_item_color); 
	background: var(--nav_item_background_hover); 
}

.NavLink svg {
	margin-right: 5px;
	pointer-events: none;
}

.NavExpand .NavLink {
	padding-right: 0;
}

.NavExpand .NavLink svg {
	margin-left: 5px !important; 
}

.NavIcon .NavLink {
	width: 30px; 
	padding: 0; 
	text-align: center; 
}

.NavIcon .NavLink svg {
	margin-right: 0 !important; 
}
/* NAV */

/* SEARCH */
.Search {
	float: left;
	width: 100%;
	min-width: 200px;
}

.FilterSpacing .Search {
	width: auto;
}

.Search input {
	font-size: 0.8rem !important; 
	color: var(--form_color); 
	padding: 0 10px 0 var(--search_size) !important; 
	background: 0 !important; 
	width: calc(100% - 10px - 2px - var(--search_size)); 
	height: calc(var(--search_size) - 2px); 
}

.Search input::placeholder {
	color: var(--form_color); 	
}

.Search {
	position: relative;
	--search_size: 30px;
}

.Search button, .Search .SearchIcon {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: var(--search_size); 
	justify-content: center; 
	height: var(--search_size); 
	display: flex; 
	align-items: center;
	color: var(--form_color); 
}

.SearchIcon svg {
	height: 60%; 
}

.AllSizes .Search input, .AllSizes .Search input::placeholder {
	color: var(--nav_search_color); 
}

.AllSizes .Search button, .AllSizes .Search .SearchIcon {
	color: var(--nav_search_color); 
}

.AllSizes .Search svg {
	margin-right: 0 !important; 
}

.AllSizes .AllSizesDivider {
	float: left; 
	margin: 0 0 var(--menu_padding) 0; 
	padding: 0 0 var(--menu_padding) 0; 
	border-bottom: 1px solid var(--menu_dark_divider);
	width: 100%; 
}

.ScrollIcon {
	display: flex;
	width: 100%;
	justify-content: center;
	padding-top: var(--menu_padding);
	display: none;
}

/*.AllSizes:has(.AllSizesLink:has(:nth-of-type(12))) .ScrollIcon {*/
.AllSizes:has(.AllSizesLink:nth-of-type(12)) .ScrollIcon {
  display: flex;
}

.SearchHeader {
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px !important;
}

.SearchHeader h2 {
	width: auto;
}

.SearchHeader .Search {
	width: auto;
	--search_size: 45px;
	flex: 1;
}

.SearchHeader input {
	font-size: 1.2rem !important;
}

.SearchContent {
	flex-wrap: nowrap !important;
}

.SearchTabs {
	width: 20% !important;
}

.SearchTabs .TabItem {
	justify-content: space-between;
}

.SearchCounter {
	display: flex;
	background: var(--search_counter_background);
	padding: 0 8px;
	height: 24px;
	min-width: 8px;
	align-items: center;
	justify-content: center;
	color: var(--color_fixed_white);
	border-radius: 12px;
	vertical-align: top;
	font-size: 0.8rem;
	font-weight: bold;
}

.SearchResults {
	width: 80% !important;
}

.SearchItems {
	gap: 5px !important;
}

.SearchItem {
	display: flex;
	border: 2px solid var(--item_background);
  border-radius: var(--border_radius);
  width: 100%;
}

.SearchItemCategory {
	max-width: 10%;
	display: flex;
  justify-content: center;
  align-content: center;
  font-size: 2.0rem;
  background: var(--item_background);
}

.SearchItem .Thumb {
	max-width: 25%;
}

.SearchItem .GameThumb {
	max-width: calc((25% * 9) / 16);
}

.SearchItem .VideoContainer {
	flex-wrap: nowrap;
	width: 100%;
	--video_padding: 15px;
}

.SearchItem p {
	font-size: 0.9rem;
}

.SearchItemDescription {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 15px;
}

.SearchItemUser .UserItem img {
	width: 60px;
	height: 60px;
}

.SearchItemForum {
	display: flex;
	gap: 5px;
}

.SearchResults .NoItems {
  flex: 1;
  height: 100%;
}

.SearchContainer {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}

.SearchHistory {
  float: left;
  clear: both;
  width: 100%;
  line-height: normal;
  font-weight: normal;
  font-size: 1.0rem;
  display: flex;
  align-items: center;
}

.SearchHistory .Link svg {
	margin-right: 5px;
}

.SearchHistory .Link {
	font-weight: normal;
	color: var(--link_red);
	margin-right: auto;
}

.SearchHistory .Link:hover {
	color: var(--link_red_hover); 
}
/* SEARCH */

/* FORM */
form {
	float: left;
	width: 100%;
}

form label {
	width: 100%;
}

label span, label strong {
	display: block;
	font-weight: normal;
	margin-top: 5px;
	font-size: 1rem;
}

.FormContainer {
	--gap: var(--item_gap);
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	gap: var(--gap);
}

.Dialog .FormContainer {
	--gap: 15px;
}

.FormContainer .TagsContainer {
	margin-left: auto;
}

.Content .FormContainer .InputContainer {
	background: var(--item_background);
	padding: var(--item_padding);
	border-radius: var(--border_radius);
}

.Content .FormContainer button {
	margin-top: 15px;
}

.Content .FormContainer .InputContainer button {
	margin-top: 0;
}

.ForumFormContainer {
	--gap: 15px;
}

.ForumFormContainer .InputContainer {
	padding: 0 !important;
	background: 0 !important;
}

.ForumFormContainer button {
	margin-top: 0 !important;
}

.FormContainer .FormOption {
	--items: 3;
	flex-basis: calc(100% / var(--items) - var(--gap) * (var(--items) - 1) / var(--items));
}

.FormContainer .FormOption:has(.Hidden) {
	display: none;
}

.FormLabelOption {
	display: flex;
	align-items: flex-end;	
}

.FormPrize {
	width: 100%;
	display: flex;
	align-items: flex-end;
	position: relative;
}

.FormContainer input, .FormContainer textarea, .FormContainer select {
	background: var(--background);
}

.InputGameContainer .AllSizesGamesContainer {
	width: 100%;
	position: relative;
}

.FormContainer input:not([type=checkbox]):hover, .FormContainer textarea:hover, .Search input:hover, .FilterSelect:hover, .AdminFilterInput:hover, .FormContainer select:hover {
	outline: 0;
	border-color: var(--form_border);
	box-shadow: 0 0 0 1px var(--form_border), inset 0 0 0 1px var(--form_border);
}

.FormContainer input:not([type=checkbox]):focus, .FormContainer textarea:focus, .Search input:focus, .FilterSelect:focus, .AdminFilterInput:focus, .FormContainer select:focus {
	outline: 0;
	border-color: var(--button_pink_background) !important;
	box-shadow: 0 0 0 1px var(--button_pink_background), inset 0 0 0 1px var(--button_pink_background);
}

.InputContainer, .InputHideContainer {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	gap: var(--item_gap);
	align-content: flex-start;
	align-items: flex-start;
}

.InputContainer .InputRelative, .MessageInput .InputRelative {
	width: 100%;
	position: relative;
}

.InputRelative input {
	/*padding-right: 29px;*/
	width: calc(100% - 20px - 2px) !important;
}

.InputButtonContainer {
	position: absolute;
	right: 0;
	top: 0;
	padding: 3px;	
}

.InputButtonContainer .InputButton {
	background: 0;
	width: 24px;
	height: 24px;
	min-width: 24px;
}

.InputButtonContainer .HidePassword {
	display: none;
}

.InputButton svg {
	height: 1.0rem !important;
}

.InputImage {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.InputImage svg {
	height: 60px;
}

.InputImage input {
	width: 120px;
	border: 0;
	box-shadow: none !important;
	cursor: pointer;
}

.InputImage input:hover ~ .Button {
	background: var(--button_background_hover) !important; 
	color: var(--button_color_hover) !important; 
}

.InputImage .Button {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	pointer-events: none;
	width: 120px;
	padding: 0 10px !important;
}

.FormButtons {
	width: 100%;
	float: left;
	display: flex;
	gap: 10px;
}

.InputItems {
	display: flex;
  flex-direction: column;
}

.FormButtons .FlexContainer {
	width: auto;
	flex-direction: column;
	gap: 5px !important;
	flex: 1;
	align-content: flex-start;
}

.InputNoWrap {
	--items: 3;
	flex-basis: calc(100% / var(--items) - var(--item_padding) * 2 - var(--gap) * (var(--items) - 1) / var(--items));
	max-width: calc(100% / var(--items) - var(--item_padding) * 2 - var(--gap) * (var(--items) - 1) / var(--items));
}

.InputContainer .InputNoWrap {
	--items: 3;
	flex-basis: calc(100% / var(--items) - var(--gap) * (var(--items) - 1) / var(--items));
}

.UploadContainer .InputNoWrap {
	--items: 2;
	flex-basis: calc(100% / var(--items) - var(--item_padding) * 2 - var(--gap) * (var(--items) - 1) / var(--items));
}

.InputSpacingSelect {
	flex-direction: column;
	--items: 3
}

.InputMultiple {
	--items: 3;
	width: calc(100% / var(--items) - var(--gap) * (var(--items) - 1) / var(--items) - 20px);
}

.InputSpacingSelect select {
	width: calc(100% / var(--items) - var(--gap) * (var(--items) - 1) / var(--items) - 20px);
}

.InputSpacingSelect input, .InputSpacingSelect .InputRelative {
	width: calc(100% / var(--items) - var(--gap) * (var(--items) - 1) / var(--items) - 20px - 2px);
}

.InputItemContainer {
	--items: 3;
	flex-basis: calc(100% / var(--items) - var(--gap) * (var(--items) - 1) / var(--items));
	gap: 5px;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

.FormContainer .InputPrizeContainer {
	--items: 5;
	flex-basis: calc(100% / var(--items) - var(--gap) * (var(--items) - 1) / var(--items));
}

.CheckBoxContainer {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	width: 100%;
}

.UploadForm .CheckBoxContainer {
	--items: 2;
	flex-basis: calc(100% / var(--items) - var(--gap) * (var(--items) - 1) / var(--items));
}

.CheckBoxContainer input {
  width: auto;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 0;
  cursor: pointer;
  height: 1.0rem;
  width: 1.0rem;
  border: 0;
  transform: translate(0, -50%);
}

.CheckBoxContainer span {
  height: calc(1.0rem - 4px);
  width: calc(1.0rem - 4px);
  border: 2px solid var(--form_checkbox);
  position: relative;
  border-radius: 0.2rem;
  pointer-events: none;
  flex-shrink: 0;
}

.CheckBoxContainer span::before {
	content: '';
	background: 0;
	position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  height: 0.5rem;
  width: 0.5rem;
}

.CheckBoxContainer input:checked ~ span {
	_border-color: var(--button_pink_background);
}

.CheckBoxContainer input:checked ~ span::before {
	background: var(--button_pink_background);
}

.CheckBoxContainer label {
	margin: 0;
  font-weight: normal;
  font-size: 0.9rem;
  line-height: 1.0rem;
  display: flex;
}

.FormButtons .CheckBoxContainer {
	height: 30px;
	justify-content: flex-end;
	width: auto;
}

.Error {
	background: var(--error_background);
	float: left;
	clear: both;
	font-weight: normal;
	clear: both;
	color: var(--error_color);
	padding: 5px 6px;
	padding-right: 10px;
	border-radius: 5px;
}

.Error svg {
	margin-right: 4px;
}

.ForumTagsContainer {
	--items: 5;
	--gap: 10px;
	gap: var(--gap);
	align-items: stretch;
}

.ForumTagsContainer .CheckBoxContainer {
	flex-basis: calc(100% / var(--items) - var(--gap) / var(--items) * (var(--items) - 1));
	min-width: calc(100% / var(--items) - var(--gap) / var(--items) * (var(--items) - 1));
	display: flex;	
	gap: 10px;
	flex-wrap: nowrap;
	align-content: flex-start;
}

.CheckUser {
	margin-top: 0 !important;
	float: right;
	display: none;
}

.CheckUser svg {
	margin-right: 5px;
}

.CheckUser span {
	margin-top: 0 !important;
}

.CheckUserReject {
	color: var(--check_user_reject);
}

.CheckUserConfirm {
	color: var(--check_user_confirm);
}

.InputFileName {
	word-break: break-word;
	font-size: 0.9rem;
	display: flex;
	flex: 1;
}

.InputFileContainer {
	flex-direction: column;
  align-items: flex-start;
}

.InputFileImage {
	max-width: calc(100% - 10px) !important;
	border: 5px solid var(--upload_preview_border);
	max-height: 20rem;
}
/* FORM */

/* NEWS BAR */
#NewsBar {
	font-size: 1.0rem;
	color: var(--color_fixed_white);
	font-weight: bold;
	width: 100%;
	background: var(--alert_background);
	cursor: pointer;
	display: block;
	height: var(--news_bar_height);
	position: relative;
	z-index: 2 !important;
	position: sticky;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	overflow: hidden;
}

#NewsBar a {
	color: var(--button_white_color);
	background: var(--button_white_background);
	border-radius: 4px;
	padding: 0 10px;
	display: inline-block;
	font-size: 0.6rem;
	text-transform: uppercase;
	margin-left: 10px;
	height: 24px;
  line-height: 24px;
}

#NewsBar a:hover {
	color: var(--button_white_color);
	text-decoration: none;
	background: var(--button_white_background_hover);
}

#NewsBarText {
	display: flex;
	align-items: center;
}
/* NEWS BAR */

/* BAR */
#BarWrap {
	width: 100%; 
	margin: auto; 
	position: fixed; 
	bottom: 0; 
	left: 0; 
	padding: 15px; 
	_background: rgba(0, 0, 0, 0.5); 
	pointer-events: none;
	z-index: 3; 
	max-height: 75px; 
}

#BarContainer {
	width: 100%; 
}

#Bar {
	position: relative; 
	width: 100%; 
}

#Bar .Pop {
	transition: none !important;
}

#Bar .MessageProfile {
	margin-right: 10px; 
}

#Bar .MessageProfile .AvatarContainer {
	float: left; 
	width: 45px; 
	height: 45px; 
}

#Bar .MessageProfile .AvatarContainer img {
	float: left; 
}

#Bar .MessageContainer {
	float: left;
	width: auto;
	position: relative;
	z-index: 6;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

#Bar .MessageBoxWrap {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}

#Bar .MessageBoxContainer {
	float: left;
	width: auto;
	position: relative;
}

#Bar .MessageBoxContainer .Width {
	width: 45px; 
	margin-right: 10px; 
	visibility: hidden; 
	height: 10px; 
	display: block; 
}

#Bar .Menu {
	float: left;
	position: absolute;
	z-index: 10;
	pointer-events: auto;
}

#Bar .MessageBox {
	left: 0; 
	right: 0; 
	bottom: 20px; 
}

#Bar .MessageContainer {
	display: inline;
	line-height: 1.5em;
	pointer-events: auto;
}

#Bar .MessageProfile:hover .Pop {
	opacity: 1.0;
}

#Bar .MessageProfile .Pop {
	width: auto !important; 
}

#Bar .Message {
	float: left;
	clear: both;
	width: 100%;
}

#Bar .Message a {
	color: var(--link_header); 
	font-size: 0.9rem !important; 
}

#Bar .Message a:hover {
	color: var(--link_header_hover); 
}

#Bar .Message .Link {
	float: none; 
	clear: none; 
	line-height: normal; 
	width: auto; 
	padding: 0; 
	color: var(--link_red); 
	position: relative;
}

#Bar .Message .Link:hover {
	color: var(--link_red_hover); 
}

#Bar .Message .Link:hover strong {
	opacity: 1;
}

#Bar .Message .Link small {
	position: absolute;
	top: -28px;
	left: -150px;
	width: 300px;
	margin-left: 50%;
	z-index: 9;
	pointer-events: none;
}

#Bar .Message .Link strong {
	opacity: 0;
	padding-bottom: 5px;
	text-align: center;
	display: block;
}

#Bar .Message .Link strong::after {
	content: '';
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--info_background);
	transform: translate(-50%, 0);
	position: absolute;
	top: 22px;
	left: 50%;
	z-index: 10;
}

#Bar .Message .Link strong em {
	display: inline-block;
	padding: 0 8px;
	height: 22px;
	line-height: 22px;
	font-weight: normal;
	font-size: 0.8rem;
	background: var(--info_background);
	color: var(--info_color);
	border-radius: 4px;
	font-style: normal;
}

#Bar .Message .Link strong:hover em {
	display: none;
}

#Bar .Message .Link strong:hover {
	background: 0;
	cursor: default;
}

#Bar .Message .MessageContainer {
	float: none; 
	clear: none; 
	color: var(--color_gray_6); 
	font-size: 0.9rem; 
}

#Bar .MessageInput {
	float: left; 
	width: calc(100% - var(--menu_padding) * 2); 
	padding: var(--menu_padding); 
  border-top: 1px solid #000; 
  display: flex;
  gap: 5px;
}

#Bar .MessageInput .Relative {
	width: 100%;
}

#Bar .MessageInput .Tags {
	width: auto;
	height: auto;
}

#Bar .MessageInput .TransparentButton {
	color: var(--button_transparent_dark_color) !important;
}

#Bar .MessageInput .TransparentButton:hover {
	background: var(--button_transparent_dark_background_hover) !important;
}

#Bar .MessageInput input {
  font-size: 1.0rem; 
  color: var(--nav_search_color); 
  padding: 0 29px 0 10px; 
  width: calc(100% - 10px - 2px - 29px); 
  height: 28px;
  flex-basis: 100%; 
}

#Bar .MessageInput .FormButtons {
	width: auto;
}

#Bar .MessageBoxOverlay {
	float: left; 
	height: 30rem; 
	max-height: 50svh;
	overflow-x: hidden; 
	overflow-y: auto; 
	margin-left: -100px; 
	width: calc(100% - var(--menu_padding) * 2); 
	padding: var(--menu_padding) var(--menu_padding) var(--menu_padding) calc(100px + var(--menu_padding));
}

#Bar .MessageBoxLoad {
	display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.MessageBoxLoad .TimelineContainer {
	margin: 10px 0;
}

#Bar .MenuContent {
	float: left; 
	z-index: 10; 
	position: relative; 
	width: 400px; 
	border-radius: 5px; 
	background: var(--menu_dark_background);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0px 8px rgba(0, 0, 0, 0.4); 
}

#Bar .Menu .MessageTitle .AvatarContainer {
	float: left; 
}

#Bar .Menu .MessageTitle {
	padding: var(--menu_padding); 
	border-bottom: 1px solid var(--menu_dark_line);
	width: calc(100% - var(--menu_padding) * 2);
	float: left;
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}

#Bar .MessageTitle img {
	float: left; 
	width: 30px; 
	height: 30px; 
	border-radius: var(--avatar_rounded); 
}

#Bar .MessageTitle .UserLink {
	text-transform: none; 
	color: var(--allsizes_color); 
	font-size: 0.9rem; 
	line-height: 30px; 
	float: left; 
}

#Bar .MessageTitle .UserLink:hover {
	color: var(--allsizes_color); 
}

#Bar .MessageTitle span {
	display: flex;
	gap: 5px;
	flex-wrap: nowrap;
	width: auto;
	align-items: center;
	font-size: 0.9rem; 
}

#Bar .MessageTitle span:nth-child(1) {
	gap: 15px;
}

#Bar .MessageTitle .UserItem {
	gap: 10px !important;
}

#Bar .MessageButton {
	width: auto; 
	float: right; 
	padding: 5px !important; 
	border-radius: 4px; 
	color: var(--nav_item_color); 
}

#Bar .MessageButton:hover {
	background: var(--menu_dark_button_background_hover);
}

#Bar .MessageButton svg {
	margin: 0 !important; 
	display: block; 
}
/* BAR */

/* PROGRESS BAR */
.ProgressContainer {
	padding: 5px 10px;
	position: relative;
	z-index: 10;
	float: left;
	clear: both;
	margin-left: -5px;
	margin-top: 10px;
	width: calc(100% - 10px);
}

.ProgressContainer:hover .CurrentContainer {
	opacity: 1.0;
}

.ProgressContainer .Progress {
	width: 100%;
	height: 8px;
	background: var(--bar_dark_background);
	position: relative; 
	border-radius: var(--border_radius); 
	overflow: hidden;
}

.ProgressContainer .Completed {
	height: 8px; 
	background: var(--xp_color);
}

.ProgressContainer .CurrentWrap {
	padding: 0; 
	width: 100%; 
}

.ProgressContainer .CurrentWrapContainer {
	position: relative; 
	padding: 0; 
	width: 100%; 
}

.ProgressContainer .CurrentContainer {
	pointer-events: none;
	position: absolute; 
	top: -15px; 
	left: 0; 
	opacity: 0;
	_transition: 0.3s ease-in-out;
}

.ProgressContainer .Current {
	background: var(--info_background); 
	position: relative; 
	bottom: 20px; 
	left: -50%; 
	display: block; 
	height: 22px; 
	border-radius: 4px;
}

.ProgressContainer .Current span {
	height: 22px; 
	line-height: 22px; 
	padding: 0 8px; 
	float: left; 
	color: var(--info_color); 
	font-size: 0.8rem;
	position: relative;
}

.ProgressContainer .Current::after {
	content: '';
	float: left;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--info_background);
	translate: calc(-50% + 6px);
	position: absolute;
	bottom: -5px;
	left: calc(50% - 6px);
	z-index: 10;
}
/* PROGRESS BAR */

/* DIALOGS */
.Overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	visibility: hidden;
	height: 100%;
	overflow: hidden;
}

.ScreenOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 9999px;
	height: 9999px;
	margin: -100% 0 0 -100%;
}

.DialogContainer {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.Dialog {
	--item_gap: var(--dialog_gap);
	float: left;
	margin: auto;
	padding: 30px;
	background: var(--dialog_background);
	border-radius: var(--border_radius);
}

.Dialog input, .Dialog select {
	background: var(--dialog_input_background);
}

.Dialog label {
	font-size: 1rem;
}

/*.Dialog button {
	margin-top: 15px;
}*/

.DialogWindow {
	max-width: 400px;
	width: 100%;
	position: relative;
	z-index: 110;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	color: var(--dialog_color);
}

.DialogHeader {
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
	font-size: 1.4rem;
	width: 100%;
	color: var(--dialog_header_color);
	font-weight: bold;
}

.DialogButtons {
  display: flex;
  gap: 5px;
  flex-direction: column;
  align-items: flex-start;
}

.InputContainer:has(.ConfirmInput) {
	display: none !important;
}

.ConfirmInput {
	display: none !important;
}

.ForgottenPassword {
	font-size: 0.9rem;
	font-weight: normal;
	color: var(--link_red);
}

.ForgottenPassword:hover {
	text-decoration: none;
	color: var(--link_red_hover);
}
/* DIALOGS */

/* SCROLLBAR */
.ScrollBarHide::-webkit-scrollbar {
	display: none;
}

.ScrollBarHide {
	overflow: auto;
	scrollbar-width: none;
}

.ScrollBar::-webkit-scrollbar {
  width: 0.5rem;
}

.ScrollBar::-webkit-scrollbar-track {
  background: var(--scrollbar_background);
  border-radius: var(--border_radius);
}

.ScrollBar::-webkit-scrollbar-thumb {
	background: var(--scrollbar_color);
	border-radius: var(--border_radius);
}

.ScrollBar::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar_color_hover);
}

.ScrollBarDark::-webkit-scrollbar {
  width: 0.5rem;
}

.ScrollBarDark::-webkit-scrollbar-track {
  background: var(--scrollbar_dark_background);
  border-radius: var(--border_radius);
}

.ScrollBarDark::-webkit-scrollbar-thumb {
	background: var(--scrollbar_dark_color);
	border-radius: var(--border_radius);
}

.ScrollBarDark::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar_dark_color_hover);
}
/* SCROLLBAR */

/* GAME BADGE */
.GameBadge .FlexContainer {
	align-items: stretch;
}

.GameBadge .FlexContainer span {
	display: flex;
	align-items: center;
}

.GameBadge .FlexContainer span:nth-child(1) {
	background: var(--item_background);
	font-size: 1.4rem;
	width: calc(25% - 30px);
	padding: 15px;
  justify-content: flex-end;
  border-radius: var(--border_radius);
  min-width: 300px;
}

.GameBadge .FlexContainer span:nth-child(2) {
  max-width: 480px;
  width: calc(75% - 10px);
}

.GameBadge textarea {
	height: 3em;
}

.GameBadge img {
	width: 100%;
}
/* GAME BADGE */

/* INVITE */
.InviteContainer {
	gap: var(--module_gap) !important;
	--items: var(--invite_layout);
}

.Invite {
	flex: 1;
	flex-basis: calc(100% / var(--items) - var(--module_gap) * 2 - var(--module_gap) * 2 / var(--items));
}

.InviteHeader {
  font-size: 3rem;
  min-height: 5rem;
  border-radius: var(--border_radius);
  background: var(--promote_background);
  color: var(--color_fixed_white);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.Invite input {
	margin-top: var(--spacing);
}
/* INVITE */

/* GOOGLE TOOLTIPS */
div.google-visualization-tooltip { 
	border: none !important; 
	box-shadow: none !important; 
	border-radius: 5px !important; 
	background-color: var(--info_background) !important; 
	padding: 0 !important; 
	margin: 0 !important; 
	height: auto !important; 
	min-height: 0 !important; 
}

div.google-visualization-tooltip > ul > li > span {
	float: left !important; 
	clear: both !important; 
	line-height: 16px !important; 
	padding: 0 !important; 
	margin: 0 !important; 
	color: var(--info_color) !important; 
	width: auto !important; 
	font-size: 12px !important; 
	font-weight: normal !important; 
	position: relative !important; 
	top: -4px !important; 
	left: -4px !important; 
}

div.google-visualization-tooltip > ul > li > span:nth-child(1) {
	float: left !important; 
	clear: both !important; 
	width: auto !important; 
	margin-bottom: 4px !important; 
}

div.google-visualization-tooltip > ul > li > span:nth-child(2) {
	float: left !important; 
	clear: none !important; 
	margin-left: 5px !important; 
}
/* GOOGLE TOOLTIPS */

/* BUTTONS */
.Button {
	float: left; 
	font-weight: bold; 
	padding: 0 12px !important; 
	height: 30px; 
	font-size: 0.8rem !important; 
	text-transform: uppercase; 
	border-radius: 4px; 
	background: var(--button_background);
	color: var(--button_color) !important;
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: center;
	position: relative;
}

.Button:hover {
	text-decoration: none; 
	background: var(--button_background_hover) !important; 
	color: var(--button_color_hover) !important; 
	cursor: pointer;
}

.Button:hover .Pop {
	transition-delay: 500ms;
	opacity: 1.0;
}

.Button svg {
	height: 50%;
}

button .Button {
	width: auto;
}

.ButtonIcon, .AdminButtons .Button {
	padding: 0 !important;
	width: 30px;
	min-width: 30px;
	text-align: center;
}

.ButtonIcon svg, .AdminButtons .Button svg {
	margin: 0 !important;
}

.ButtonIcon svg, .PollButton svg, #LikeButton svg, #SubscribeButton svg, .AdminButtons .Button svg {
	height: 60%;	
}

.ButtonLowercase {
	text-transform: none;
}

.Button:focus, button:focus {
	outline: none !important; 
}

h2 .Button {
	margin: 0;
	margin-left: 5px;
	float: right;
}

.FullWidthButton {
	width: 100%;
}

.LargeButton {
	font-size: 1.2rem !important;
	line-height: 45px !important;
	height: 45px !important;
	padding: 0 18px !important; 
	border-radius: 4px;
}

.LargeButtonIcon {
	height: 45px;
	width: 21px;
}

.GrayButton {
	color: var(--button_gray_color) !important; 
	background: var(--button_gray_background); 
}

.GrayButton:hover {
	color: var(--button_gray_color) !important; 
	background: var(--button_gray_background_hover) !important; 
}

.PinkButton {
	color: var(--button_pink_color) !important; 
	background: var(--button_pink_background); 
}

.PinkButton:hover {
	color: var(--button_pink_color) !important;
	background: var(--button_pink_background_hover) !important; 
}

.PurpleButton {
	color: var(--button_pink_color) !important; 
	background: var(--button_pink_background); 
}

.PurpleButton:hover {
	color: var(--button_pink_color) !important;
	background: var(--button_pink_background_hover) !important; 
}

.GreenButton, .DownloadButton {
	color: var(--button_pink_color) !important; 
	background: var(--button_pink_background); 
}

.GreenButton:hover, .DownloadButton:hover {
	color: var(--button_pink_color) !important;
	background: var(--button_pink_background_hover) !important; 
}

.BlueButton {
	color: var(--button_pink_color) !important; 
	background: var(--button_pink_background); 
}

.BlueButton:hover {
	color: var(--button_pink_color) !important; 
	background: var(--button_pink_background_hover) !important; 
}

.RedButton, .CheckLink {
	background: var(--button_red_background) !important;
	color: var(--color_fixed_black) !important;
	word-break: normal;
}

.RedButton:hover, .CheckLink:hover {
	background: var(--button_red_background_hover) !important;
	color: var(--color_fixed_black) !important;
}

.SubscribedButton, .SubscribedButton:hover {
	color: var(--button_active_color) !important; 
	background: var(--button_active_background) !important; 
}

.ActiveButton {
	color: var(--button_active_color) !important; 
	background: var(--button_active_background); 
	cursor: default !important;
}

.ActiveButton:hover {
	color: var(--button_active_color) !important; 
	background: var(--button_active_background_hover) !important; 
}

.WhiteButton {
	color: var(--button_white_color) !important; 
	background: var(--button_white_background) !important; 
}

.WhiteButton:hover {
	color: var(--button_white_color) !important; 
	background: var(--button_white_background_hover) !important; 
}

.TransparentButton {
	color: var(--button_transparent_color) !important; 
	background: var(--button_transparent_background) !important; 
}

.TransparentButton:hover {
	color: var(--button_transparent_color) !important; 
	background: var(--button_transparent_background_hover) !important; 
}

.InactiveButton {
	color: var(--button_color_inactive) !important; 
	background: var(--button_background_inactive) !important;
}

.InactiveButton:hover {
	color: var(--button_color_inactive) !important; 
	background: var(--button_background_inactive) !important;
	cursor: default;
}

.InactiveButtonDefault {
	color: #cccccc !important; 
	background: #f2f2f2 !important;
}

.InactiveButtonDefault:hover {
	color: #cccccc !important; 
	background: #f2f2f2 !important;
	cursor: default;
}
/* BUTTONS */

/* FOOTER */
#FooterWrap {
	width: 100%; 
	margin: auto; 
	position: relative; 
	float: left;
	background: var(--footer_background);
	/*_background-image: url(/background.php?fill=204-0-153-0.25);
	_background-size: 50rem 50rem;*/
}

#FooterBackground {
	width: 100%; 
	margin: auto; 
	position: relative; 
	float: left;
	/*_background-image: linear-gradient(to bottom, var(--footer_background), transparent);*/
}

#Footer {
	font-size: 1.0rem; 
	color: var(--footer_color); 
	width: calc(100% - var(--footer_padding) * 2);
  max-width: var(--page_width);
  padding: var(--footer_padding);
	padding-bottom: calc(var(--footer_padding) + var(--nav_height)); 
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding-top: var(--footer_padding);
}

#Footer h3 {
	color: var(--color_fixed_white); 
	font-size: 1.2rem; 
	text-transform: uppercase; 
}

#Footer a:not(.Button)  {
	color: var(--footer_color); 
}

#Footer a:not(.Button):hover, .FollowUsLink:hover {
	color: var(--footer_color_hover) !important; 
}

.ScrollUp {
	justify-content: flex-end;
}

.FollowUs {
	font-size: 1.0rem; 
	color: var(--footer_color); 
	align-items: flex-start;
}

.FollowUs .FlexContainer {
	align-items: center;
	gap: 15px !important;
}

.FollowUs h3 {
	float: left; 
	line-height: 30px; 
	height: 30px; 
	margin-right: 5px; 
}

.FollowUsLink {
	display: inline-block; 
}

.FollowUsLink svg {
	float: left; 
	display: inline-block; 
	height: 30px; 
}

.FooterContainer {
	padding-top: 15px;
	float: left; 
	width: calc(100% / 3 - var(--spacing) * 2 / 3); 
}

.FooterContainer h3 {
	width: 100%; 
	margin-bottom: 15px;
	height: 30px;
  display: flex;
  align-items: center;
}

.FooterContainer a {
	float: left; 
	clear: both; 
	line-height: 30px; 
	font-size: 1rem; 
}

.FooterGame {
	float: left; 
	width: 50%; 
}

.FooterGame a {
	clear: none; 
}

.FooterGame img {
	float: left; 
	width: 20px; 
	height: 20px; 
	margin-top: 5px; 
	margin-right: 10px; 
	border-radius: 50%; 
}

.DisclaimerContainer {
	float: left; 
	width: 100%; 
	margin: 15px 0; 
}

.DisclaimerContainer a {
	font-size: 0.8rem; 
	margin-right: 15px; 
}

.DisclaimerContainer p {
	font-size: 1.0rem; 
	color: var(--footer_color); 
}

.ScrollContainer {
	flex-basis: 0;
}
/* FOOTER */

/* LAYOUT */
#Main {
	float: left;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

#Wrap {
	margin: auto;
	position: relative;
}

#PageWrap {
	--header_height: var(--nav_height);
	margin-top: var(--header_height);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  outline: 0;
}

.NoPageScroll {
	overflow-y: hidden !important;
}

.ScreenHeight {
	height: calc(100svh - var(--header_height));
}

.PageWrapNews {
	--header_height: calc(var(--nav_height) + var(--news_bar_height)) !important;
}

.Column.ScreenHeight {
	height: calc(100svh - var(--header_height) - 20px);
}

#ModuleWrap {
	width: calc(100% - var(--module_padding) * 2);
	max-width: var(--page_width);
	margin: auto; 
	position: relative; 
	z-index: 1; 
}

.FullWidth {
	--page_width: 100vw;
}

#Module {
	width: 100%; 
	float: left; 
	position: relative; 
	height: auto; 
	word-wrap: break-word;
	padding: var(--module_padding) 0; 
	display: flex;
	flex-wrap: wrap;
	gap: var(--module_gap);
	align-content: flex-start;
	color: var(--color_text);
	min-height: calc(100svh - var(--header_height) - var(--module_padding) * 2);
}

.Content {
	width: 75%;
	float: left;
	position: relative;
	z-index: 2;
	display: flex;
	gap: var(--module_gap);
	flex-wrap: wrap;
	align-content: flex-start;
}

.BaseContent {
	width: 65%;
}

.ProfileContent {
	flex-wrap: nowrap;
}

.FullContent {
	width: 100% !important;
	align-items: flex-start;
}

.Column {
	--column_items: var(--column_layout);
	float: left;
	width: calc(25% - var(--module_gap));
	display: flex;
	flex-wrap: wrap;
	gap: var(--module_gap);
	align-content: flex-start;
}

.Column:empty {
	display: none;
}

.BaseColumn {
	width: calc(35% - var(--module_gap));
}

.ColumnItems {
	gap: var(--column_spacing) !important;
}

.ColumnBrowseContainer {
	width: calc(100% / var(--column_items) - var(--column_spacing) * (var(--column_items) - 1)) !important;
}

.Container {
	float: left;
	background: var(--background);
	padding: var(--container_padding);
	width: calc(100% - var(--container_padding) * 2);
	border-radius: var(--border_radius);
	position: relative;
	display: flex;
	gap: var(--container_gap);
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
}

.Container img {
	max-width: 100%;
}

.ContainerTransparent {
	background: 0;
	padding: 0;
	width: 100%;
	gap: var(--module_gap);
}

.ContainerTransparent h2 {
	background: var(--background);
	padding: var(--container_padding);
	width: calc(100% - var(--container_padding) * 2);
	border-radius: var(--border_radius);
	/*margin-bottom: -5px;*/
}

.ContainerBackground .VideoContainer {
	padding: 0;
	padding-bottom: 15px;
	flex-basis: calc(100% / var(--items) - var(--gap) / var(--items) * (var(--items) - 1));
  min-width: calc(100% / var(--items) - var(--gap) / var(--items) * (var(--items) - 1));
}

.Container .ContainerTransparent h2, .ContainerTransparent .FlexContainer h2 {
	padding: 0;
	background: 0;
	width: 100%;
	margin-bottom: 0;
}

.FlexContainer {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing);
}

.FlexContainerRight {
	margin-left: auto;
	width: auto !important;
}

.FlexButtons {
	gap: 5px;	
}

.FlexButtons .Button {
	float: none;
	margin: 0;
}

.FlexWrap {
	flex-wrap: wrap;
}

.FlexJustifyEnd {
	justify-content: flex-end;
}

.FlexWidth {
	width: 100%;
}

.FlexNoWrap {
	flex-wrap: nowrap;
}

.FlexAlignStart {
	align-items: flex-start;
}

.FlexAlignContentStart {
	align-content: flex-start;
}

.FlexJustifyCenter {
	justify-content: center;
}

.FlexSpaceBetween {
	justify-content: space-between;
}

.FlexSmallGap {
	gap: 5px !important;
	--gap: 5px;
}

.FlexMediumGap {
	gap: 10px !important;
}

.FlexLargeGap {
	gap: 15px !important;
}

.FlexHugeGap {
	gap: 25px;
}

.FlexNoGap {
	gap: 0 !important;
}

.FlexDirectionColumn {
	flex-direction: column;
}

.AlignItemsCenter {
	align-items: center;
}

.FlexListContainer::after {
  *content: '';
  *flex-grow: 1000000000;
}

.Column .FlexContainer {
	gap: var(--post_gap);
}

.Column .CommentsContainer .FlexContainer {
	gap: var(--post_gap);
}

.WidthAuto {
	width: auto !important;
}

.Column .CommentsContainer .ExpandContainer {
	margin-top: 5px;
}

.Empty {
	visibility: hidden !important;
}

.ColumnContainer h4 {
	font-size: 1.0rem;
	font-weight: bold;
	text-transform: uppercase;
}

.ItemContainer {
	float: left;
	clear: both;
	padding: var(--item_padding);
	width: calc(100% - var(--item_padding) * 2);
	background: var(--item_background);
	border-radius: var(--border_radius);
	display: flex;
}

a.ItemContainer, a.ItemContainer:hover {
	color: var(--color_black);
}

.ItemContainerClickable {
	transition: 0.3s ease-in-out;
}

.ItemContainerClickable:hover {
	color: var(--color_text);
	background: var(--item_background_hover) !important;	
}

.IconContainer {
	gap: 0 !important;
	flex-grow: 0 !important;
}

.IconContainer svg {
	margin-right: 5px;
}

.ButtonsContainer {
	gap: var(--button_spacing) !important;
}

.ListContainer {
	gap: var(--list_spacing) !important;
}
/* LAYOUT */

/* MESSAGES */
.MessagesHeader {
	flex-wrap: nowrap;
	align-items: center;
}

.MessagesHeader span {
	display: flex;
  gap: 5px;
  flex-wrap: nowrap;
  width: auto;
  align-items: center;
  font-size: 0.9rem;
}

.MessagesHeader .UserItem {
	width: auto;
	gap: 10px;
	font-size: 1.0rem;
}

.MessagesFilterContainer {
	position: fixed;
	background: var(--background);
  width: calc(20% - var(--tab_padding) * 2);
  max-width: calc(20% - var(--tab_padding) * 2);
  left: 0;
  top: var(--header_height);
  padding: var(--tab_padding);
  float: left;
  height: calc(100% - var(--header_height) - var(--tab_padding) * 2);
}

.MessagesFilterContainer .TabsContainer {
	padding: 0;
	width: 100%;
}

.MessagesContent {
	width: 100%;
  margin-left: calc(20% + var(--module_gap) * 2 * 0.2);
}

.MessagesColumnContainer {
	/*_max-height: calc(100vh - var(--header_height) - 20px - 30px);*/
	height: calc(100svh - var(--header_height) - var(--tab_padding) * 2);
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	gap: var(--tab_spacing);
	flex-wrap: wrap;
	width: 100%;
}

.MessagesColumnContainer .ExpandContainer {
	margin-top: 5px !important;
}

.MessagesColumnContainer .TabItem {
	justify-content: space-between;
}

.MessagesColumnContainer .TabItem img {
	width: 30px;
	height: 30px;
	display: block;
	border-radius: var(--avatar_rounded);
}

.MessagesColumnContainer .TabItem span {
	display: flex;
	gap: 10px;
	align-items: center;
}

.MessagesColumnContainer .SearchCounter {
	background: var(--notification_background);
}

.MessagesContainer {
	/*max-height: calc(100vh - var(--header_height) - 20px - 40px);*/
	max-height: calc(100% - var(--header_height) - var(--container_padding) * 2 - var(--module_gap) * 2);
}

.MessagesContainer {
	display: flex;
  gap: 10px;
  align-content: stretch;
  align-items: stretch;
  flex-direction: column;
}

.MessagesInput {
	width: 100%;
}

.MessagesInput form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.MessagesLoad {
	width: 100%;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	gap: 10px;
	flex-direction: column-reverse;
	margin-top: var(--container_padding);
	margin-bottom: 10px;
}

.MessageContainer {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.MessagesExpand {
	display: flex;
	gap: 15px;
	flex-direction: column-reverse;
}

.MessageText {
	width: calc(100% - 10px);
  line-height: 1.5em;
}

.MessagesOverviewContainer {
	gap: var(--container_padding);
	margin: auto;
}

.MessagesOverviewContainer h3 {
	display: flex;
  justify-content: center;
  width: 100%;
}

.MessagesOverview {
	--items: 3;
	--gap: 10px;
	gap: 10px;
	justify-content: center;
}

.MessagesOverview .Users {
	gap: 10px;
}

.MessagesOverview .AvatarContainer {
	height: 30px !important;
}

.MessagesOverview .SearchCounter {
	margin-left: auto;
	background: var(--notification_background);
}
/* MESSAGES */

/* QUIZ */
.QuizScoresContainer .ItemContainer {
	align-items: center;
	gap: 10px;
}

.QuizScoresContainer .ItemContainer span:nth-child(1) {
	width: 5%;
	text-align:center;
}

.QuizScoresContainer .ItemContainer span:nth-child(3) {
	margin-left: auto;
}

.QuizScore {
	text-transform: none;
}

.QuizScore svg {
	margin-right: 5px;
}

.QuizContainer {
	/*background: linear-gradient(45deg, hsl(270deg 100% 40%), hsl(285deg 100% 40%));*/
	/*background: linear-gradient(30deg, hsl(270, 100%, 30%), hsl(315, 100%, 40%));*/
	background: linear-gradient(223.17deg,#8c7bc8,#8a77c2 8.61%,#866db2 17.21%,#7e619f 25.82%,#75548b 34.42%,#6d4b7b 43.03%,#694775 51.63%);
	/*background: linear-gradient(223.17deg,#c36267,#bd5f68 8.61%,#ae586a 17.21%,#9b4e69 25.82%,#874466 34.42%,#783d61 43.03%,#723a5f 51.63%);
	background: linear-gradient(223.17deg,#545b75,#515872 8.61%,#4a526c 17.21%,#424964 25.82%,#3a415c 34.42%,#343b56 43.03%,#323953 51.63%);
	background: linear-gradient(223.17deg,#237287,#246c84 8.61%,#265f7c 17.21%,#274f72 25.82%,#284367 34.42%,#283a5f 43.03%,#28375c 51.63%);*/
	color: var(--color_fixed_white);
}

#QuizContainer {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

#QuizContainer h2 {
	display: flex;
  justify-content: space-between;
}

.QuizQuestion {
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
}

.QuizAnswers {
	justify-content: center;
}

.QuizButtons {
	width: auto;
	flex-wrap: nowrap;
	gap: 5px;
}

.QuizAnswer {
	width: 75%;
	height: 5rem;
	line-height: 5rem;
	text-align: center;
	font-style: normal;
	color: var(--quiz_answer_color);
	font-weight: bold;
	font-size: 1.2rem;
	background: var(--quiz_answer_background);
	border-radius: var(--border_radius);
}

.QuizAnswer:hover {
	color: var(--quiz_answer_color_hover);
	background: var(--quiz_answer_background_hover) !important;
}

span.QuizAnswer {
	cursor: default;
}

.Correct, .Correct:hover {
	background: var(--quiz_correct_background) !important;
	color: var(--quiz_color);
}

.Wrong, .Wrong:hover {
	background: var(--quiz_wrong_background)  !important;
	color: var(--quiz_color);
}
/* QUIZ */

/* SLOT MACHINE */
.SlotMachineContainer {
	/*background: linear-gradient(0deg, hsl(330deg 100% 40%), hsl(345deg 100% 40%));*/
	/*background: linear-gradient(45deg, hsl(270deg 100% 40%), hsl(285deg 100% 40%));*/
	/*background: linear-gradient(30deg, hsl(270, 100%, 30%), hsl(315, 100%, 40%));*/
	/*background: linear-gradient(223.17deg,#8c7bc8,#8a77c2 8.61%,#866db2 17.21%,#7e619f 25.82%,#75548b 34.42%,#6d4b7b 43.03%,#694775 51.63%);*/
	background: linear-gradient(223.17deg,#c36267,#bd5f68 8.61%,#ae586a 17.21%,#9b4e69 25.82%,#874466 34.42%,#783d61 43.03%,#723a5f 51.63%);
	color: var(--color_fixed_white);
}

#SlotMachineContainer {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	width: 100%;
}

#SlotMachineContainer h2 {
	display: flex;
  justify-content: space-between;
}

.SlotMachineScore {
	text-transform: none;
}

.SlotMachineScore svg {
	margin-right: 5px;
}

.SlotMachineInterface {
	width: 75%;
	margin: auto;
}

.SlotMachineIcons {
	width: 100%;
	position: relative;
}

.SlotMachineIcon {
	width: calc(100% / 3 - var(--spacing) * 2 / 3);
	aspect-ratio: 1;
	overflow-y: hidden;
	border-radius: var(--border_radius);
	position: relative;
}

.SlotMachineReelItems {
	width: 100%;
	aspect-ratio: 1;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.SlotMachineReelItem {
	width: 100%;
	aspect-ratio: 1;
	background-size: 40%; /*50%*/
	background-repeat: no-repeat;
	background-position: center center;
	background-image: var(--symbol);
}

#SlotMachineButton {
	flex: 1;
}

.SlotMachineButton {
	height: 5rem !important;
}

.SlotMachineButtonIcon {
	width: 5rem;
	height: 5rem;
	padding: 0 !important;
}

#SlotMachineDisplay {
	/*width: calc(100% * 2 / 3);
	position: absolute;
	top: 50%;
	left: 50%;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	transform: translate(-50%, -50%);
	z-index: 2;
	visibility: hidden;*/
	/*background: #fff;
	color: #000;*/
	border-radius: var(--border_radius);
	justify-content: center;
	/*font-size: 1.2rem;*/
	font-size: 1.6rem;
	/*text-transform: uppercase;*/
	padding: 1rem 0;
	gap: 5px;
	/*font-weight: bold;*/
}

.SlotMachinePrizes {
	padding: 10px;
	background: #fff;
	color: #000;
	border-radius: var(--border_radius);
	--items: 3;
	--gap: 10px;
	gap: var(--gap);
}

.SlotMachinePrize {
	display: flex;
  align-items: center;
  background: #f2f2f2;
	width: calc(100% / var(--items) - 20px - var(--gap) / var(--items) * (var(--items) - 1));
	padding: 5px 10px;
	border-radius: var(--border_radius);
	gap: 5px;
}

.SlotMachinePrizeSymbol {
	display: flex;
	width: 10%;
	aspect-ratio: 1;
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: var(--symbol);
	align-items: center;
}

.SlotMachinePrizeSymbol svg {
	width: 100%;
}

.SlotMachinePrizeText {
	margin-left: auto;
}

.SlotMachineWinReel {
	margin-left: auto;
	display: flex;
	gap: 5px;
}

.SlotMachineWinReel .SlotMachinePrizeSymbol {
	width: auto;
	height: 100%;
}
/* SLOT MACHINE */

/* FORUMS */
/*.UnreadTopicsContent {
	display: none;
}*/

.ForumHeader {
	display: flex;
  align-items: center;
  width: 100%;
  min-height: 30px;
}

.ForumHeader .Button {
	margin-left: auto;
}

.ForumContainer {
	/*float: left;
	clear: both;*/
	--items: 1;
	--gap: var(--post_gap);
	background: var(--background);
	padding: var(--container_padding);
	width: calc(100% - var(--container_padding) * 2);
	border-radius: var(--border_radius);
	min-height: 0;
}

.ForumContainer:first-of-type {
	margin: 0;
}

.ForumContainer h2 {
	align-items: center;
	text-transform: none;
}

.ForumContainer h3 a {
	gap: 5px;
	display: flex;
}

.ForumItemsContainer {
	--items: 3;
}

.ForumItems {
	width: 100%;
	flex-wrap: wrap; 
	display: flex;
	gap: var(--gap);
}

.ForumItem {
	/*float: left;
	clear: both;*/
	/*width: 100%;*/
	width: calc(100% / var(--items) - var(--gap) / var(--items) * (var(--items) - 1));
	background: var(--item_background);
	transition: 0.3s ease-in-out;
	border-radius: var(--border_radius);
	display: flex;
}

.ForumItem:hover {
	background: var(--item_background_hover);
}

.ForumItem a {
	flex: 1;
	padding: var(--item_padding);
	color: var(--color_black);
}

.ForumItemsContainer .ForumItem a:nth-child(2) {
	padding-top: 0px;
}

.ForumItem a:hover {
	color: var(--color_black);
}

.ForumItem h3 {
	font-size: 1.0rem;
	line-height: 1.5rem;
	align-items: center;
}

.ForumItem .Stats {
	margin-top: 5px;
}

.ForumItemsContainer .ForumItem {
	flex-direction: column;
}

/*.ForumItemsContainer .ForumItem a {
	padding: 15px;
}*/

.FirstPost {
	font-size: 1.0rem;
}

.ForumTitle {
	display: inline-block !important;
	line-height: 1.5rem;
}

.ForumTitle span {
	display: inline !important;
	float: none !important;
	margin-right: 5px;
	vertical-align: middle;
}

.ForumTitle .ForumTag {
	display: inline-block !important;
}

.ForumActions {
	position: relative;
	float: left;
	width: 100%;
}

.ForumActions .Button {
	margin: 0;
	margin-left: 5px;
	float: right;
}

.ForumActions .AllSizes {
	right: 0;
	top: 35px;
	left: auto;
}

.ForumActions:empty {
	display: none;
}

.ForumListing .Listing {
	float: left;
	width: auto;
}

.ForumActionsBottom {
	margin-bottom: 0;
}

.ForumActionsBottom .AllSizes {
	bottom: 35px;
	top: auto;
}

.PinnedTopic, .PinnedTopic .ForumTitle {
	color: var(--sticked_color) !important;
}

.PinnedTopic .ForumTag {
	background: var(--sticked_color) !important;
	color: var(--color_fixed_white) !important;
}

.LockedTopic, .LockedTopic .ForumTitle, .Locked {
	color: var(--locked_color) !important;
}

.HotTopic {
	color: var(--hot_color);
}

.ForumPosts {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: var(--post_gap);
}

.ForumPosts .Comment {
	margin: 0;
}

.ForumPosts .CommentUser {
	flex-basis: calc(30% - var(--post_padding) * 2);
}

.LastPost {
	display: flex;
	align-items: center;
}

.LastPost img {
	width: 30px;
	height: 30px;
	float: left;
	margin-right: 10px;
	border-radius: var(--avatar_rounded);
}

.LastPost span {
	font-size: 1.0rem;
	line-height: 30px;
}

.LastPost small {
	font-size: 0.9rem;
	margin-left: 20px;
	line-height: 30px;
	font-weight: normal;
	color: var(--stats_color);
}

.LastPost small svg {
	margin-right: 5px;
}

.Signature {
	color: var(--forum_signature_color) !important;
	border-top: 2px solid var(--forum_signature_border);
	padding: 0;
	margin-top: 15px;
	padding-top: 15px;
	font-size: 0.8rem !important;
	width: 100%;
 	max-height: 150px;
 	overflow: hidden;
 	text-align: center;
}

.Signature img {
	max-width: 100%;
	max-height: 100px;
	display: inline-block;
}

.PostReplyContainer {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.PostReplyItem {
	gap: 2px;
	display: flex;
}

.PostReplyItem .Stats, .PostReplyItem .UserAdmin {
	font-size: 0.9rem;
}

.PostReplyItem .Stats span {
	gap: 5px !important;
}

.PostReply {
	flex: 1;
	gap: var(--post_gap);
	display: flex;
	flex-wrap: wrap;
	max-width: 90%;
	min-width: 90%;
	margin-left: auto;
}

.PostReply h3 {
	margin: 10px 0;
	width: 100%;
  text-align: center;
  font-weight: bold;
}

.PostReply .Comment {
	flex-wrap: wrap;
}

.PostReply .CommentUserItem {
	width: 100%;
	padding: var(--comment_padding);
	display: flex;
	background: var(--item_background);
}

.PostReply .CommentUserItem img {
	width: 30px;
	height: 30px;
}

.PostReply .CommentUserItem span:nth-child(1) {
	gap: 10px;
}

.PostReply .CommentUserItem .FlexContainer {
	width: auto;
	gap: var(--spacing);
}

.PostReply .EditContainer {
	margin: 0;
	margin-left: auto;
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
}

.PostReply .CommentTextContainer {
	max-width: 100% !important;
}

.QuoteContainer {
	display: none;
}

.PostingLocked {
	line-height: 1.5rem;
	font-weight: normal;
	display: flex;
	gap: 5px;
}

.PostingLocked svg {
	height: 1.5em;
}

.ForumRules {
	float: left;
	padding: 15px;
	width: calc(100% - 30px);
	background: var(--forum_rules_background);
	border-radius: var(--border_radius);
}

.ForumRules p {
	float: left;
	margin: 15px 0;
	color: var(--color_fixed_white);
	font-size: 0.9rem;
}

.ForumRules h2 {
	font-weight: bold;
	color: var(--color_fixed_white);
	width: 100%;
}

.ForumRulesContainer h3 {
	margin-top: 15px;
	line-height: 2.0rem;
}

.ForumRulesContainer h3:first-child {
	margin: 0;
}
/* FORUMS */

/* POST OVERVIEW */
.PostOverviewHeader {
	display: flex;
	align-items: center;
	gap: 15px;
	background: var(--item_background);
	height: 30px;
}

.PostOverviewVote {
	display: flex;
	gap: 5px;
}
/* POST OVERVIEW */

/* PLAYER OVERVIEW */
.PlayerOverviewHeader {
	display: flex;
	align-items: center;
	gap: 15px !important;
	background: var(--item_background);
	cursor: pointer;
}

.PlayerOverviewHeader:hover {
	background: var(--item_background_hover);
}

.PlayerOverviewHeader .UserItem {
	width: auto;
}

.PlayerOverviewExpand {
	margin-left: auto;
}

.PlayerOverviewContainer {
	--items: 3;
	--gap: 5px;
	gap: var(--gap);
}

.PlayerOverviewContainer .ItemContainer {
	flex-basis: calc(100% / var(--items) - var(--item_padding) * 2 - var(--gap) / var(--items) * (var(--items) - 1));
	min-width: calc(100% / var(--items) - var(--item_padding) * 2 - var(--gap) / var(--items) * (var(--items) - 1));
	display: flex;	
	gap: 10px;
	flex-wrap: wrap;
	align-content: flex-start;
}

.PlayerOverviewButtonsContainer {
	gap: 5px;
}

.ProfileOverview {
	margin-bottom: -15px;
	gap: 5px;
}
/* PLAYER OVERVIEW */

/* MAP */
.MapContainer {
	width: 100%;
	aspect-ratio: 2;
	overflow: hidden;
	position: relative;
	border-radius: var(--border_radius);
	touch-action: none !important;
}

.MapSize {
	position: absolute;
	z-index: 1;
	width: 100%;
	touch-action: none !important;
}

.MapItem {
	width: calc(100% / var(--items));
	aspect-ratio: 1;
	float: left;
	background-size: 100%;
	margin-top: -.5px;
	margin-left: -.5px;
	background-repeat: no-repeat;
	touch-action: none !important;
}

.Map {
	width: 100%;
	height: 100%;
	touch-action: none !important;
}

.MapControls {
	position: absolute;
	z-index: 100;
	right: 15px;
	top: 15px;
	display: flex;
	flex-wrap: wrap;
	--gap: 35px;
}

.MapUp {
	position: absolute;
	right: calc(var(--gap));
	top: calc(var(--gap) * 1.5);
}

.MapDown {
	position: absolute;
	right: calc(var(--gap));
	top: calc(var(--gap) * 3.5);
}

.MapLeft {
	position: absolute;
	right: calc(var(--gap) * 2);
	top: calc(var(--gap) * 2.5);
}

.MapRight {
	position: absolute;
	right: 0;
	top: calc(var(--gap) * 2.5);
}

.MapZoomIn {
	position: absolute;
	right: calc(var(--gap) * 0.5);
	top: 0;
}

.MapZoomOut {
	position: absolute;
	right: calc(var(--gap) * 1.5);
	top: 0;
}

.Blip {
	position: absolute;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	cursor: pointer;
	background-image: url(images/blips-v4.png);
	background-size: 256px 256px;
}

.Blip:hover {
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	background-size: 384px 384px;
}

#Map .Pop {
	transition: 0s;
	background: var(--info_light_background);
	color: var(--info_light_color) !important; 
}

#Map .Pop::after {
	border-top-color: var(--info_light_background);
}

.Blip:hover .Pop, .Marker:hover .Pop {
	opacity: 1;
}

.Marker {
	position: absolute;
	width: 6px;
	height: 6px;
	border: 2px solid var(--map_marker_border);
	background: var(--map_marker_color);
	margin: -5px 0 0 -5px;
	border-radius: 5px;
	cursor: pointer;
}

.Marker:hover {
	border: 3px solid var(--map_marker_border);
	width: 8px;
	height: 8px;
	margin: -7px 0 0 -7px;
	border-radius: 7px;
}

.Zone {
	position: absolute;
}

.Zone span, .Zone em {
	float: left;
	width: 100%;
	height: 100%;
}

.Zone span {
	visibility: visible;
}

.Zone em {
	background: rgba(255, 0, 0, 0.66);
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
}

.Legend, .LegendExpand {
	background-color: var(--map_legend_background);
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 13;
}

.Legend {
	width: 250px;
	display: flex;
	flex-direction: column;
	padding: var(--container_padding);
	height: calc(100% - var(--container_padding) * 2);
	gap: 15px;
	align-items: flex-start;
}

.LegendExpand {
	width: 10px;
	visibility: hidden;
}

.LegendHide, .LegendShow {
	float: left;
	border-left: 10px solid var(--map_legend_background);
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	height: 60px;
	width: 0;
	position: absolute;
	top: calc(50% - 30px - 10px);
	right: -10px;
	color: var(--map_legend_color);
	cursor: pointer;
}

.LegendHide svg, .LegendShow svg {
	position: relative;
  left: -15px;
  top: 50%;
  transform: translate(0, -50%);
}

.Legend h4 {
	color: var(--map_legend_color);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.4rem;
}

.Legend p {
	font-weight: normal;
	font-size: 1rem;
	color: var(--map_legend_color);
	display: flex;
  align-items: center;
  justify-content: space-between;
}

.Legend .Icon {
	font-weight: normal;
	font-size: 1rem;
	color: var(--map_legend_color);
	display: flex;
  align-items: center;
  gap: 10px;
}

.Legend .Icon em {
	float: left;
	background-image: url(images/blips-v4.png);
	height: 16px;
	width: 16px;
	background-size: 256px 256px;
}

.Legend .FlexContainer {
	flex-direction: column;
	gap: 10px;
	/*flex-basis: 100%;*/
	flex-shrink: 1;
}

.Legend .Button {
	flex-shrink: 0;
}

.Legend .TickBox {
	border: 2px solid var(--map_tickbox);
	border-radius: 0.2rem;
	cursor: pointer;
	height: calc(1.0rem - 4px);
  width: calc(1.0rem - 4px);
	position: relative;
}

.Legend .TickBox svg {
	width: 100%;
	height: 100%;
	float: left;
	background: var(--button_pink_background);
	color: var(--button_pink_background);
	position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  height: 0.5rem;
  width: 0.5rem;
}

.MapAlert {
	display: flex;
	width: calc(100% - 280px);
	height: 100%;
	padding-left: 280px;
	align-items: center;
  justify-content: center;
  position: relative;
  z-index: 200;
  pointer-events: none;
}

.MapAlert span {
	padding: 15px;
	border-radius: var(--border_radius);
	background: var(--notify_backgroud);
	color: var(--color_fixed_black);
	display: flex;
	gap: 5px;
	flex-wrap: nowrap;
	font-weight: bold;
  cursor: pointer;
  pointer-events: auto;
}
/* MAP */

/* ALL SIZES */
.AllSizes {
	position: absolute; 
	top: 30px; 
	left: 0; 
	min-width: 250px; 
	max-width: 25.0vw; 
	background: var(--menu_dark_background);
	border-radius: 5px; 
	z-index: 100; 
	padding: var(--menu_padding); 
	visibility: hidden; 
	white-space: nowrap; 
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0px 8px rgba(0, 0, 0, 0.4); 
	height: max-content;
}

.AllSizesEmoticons {
	padding: 0;
	max-width: max-content;
	width: min-content;
}

.AllSizesScroll {
	/*width: 100%;*/
	max-height: calc(12 * 40px);
	overflow-y: auto;
	overflow-x: hidden;
}

#Header .AllSizesScroll {
	width: 100%;
}

.MediaHeader .AllSizes {
	top: 60px;
}

.AllSizes .AllSizesLink {
	background: 0; 
	float: left; 
	clear: both; 
	width: calc(100% - 20px); 
	line-height: 20px;
	height: 20px;
	padding: 10px !important; 
	border-radius: 4px; 
	text-transform: none; 
	font-weight: normal; 
	color: var(--nav_item_color); 
	font-size: 1.0rem; 
	display: inline-block;
}

.AllSizes .AllSizesLink svg:nth-child(1) {
	margin-right: 10px; 
}

.AllSizes .AllSizesLink:hover {
	background: var(--menu_dark_button_background_hover);
}

/*.AllSizesScroll {
	padding-right: 10px;
}*/

.AllSizes em svg {
	margin-right: 0 !important; 
}

.AllSizes em {
	font-style: normal; 
	float: right; 
}

.OnlineBadge {
	background: var(--online_background);
	border-radius: 10px;
	color: #000;
	text-align: center;
	padding: 0 4px;
	min-width: 12px;
	height: 20px; 
	line-height: 20px; 
	font-weight: bold;
	font-style: normal; 
	font-size: 0.6rem;
	display: inline-block;
}

.FilterSelect .OnlineBadge {
	margin-left: 5px;
	transform: translate(0, -1.5px);
	height: 16px; 
	line-height: 16px;
	min-width: 10px;
	border-radius: 8px;
	padding: 0 3px;
	font-size: 0.5rem;
}

.AllSizes h3 {
	margin-left: calc(var(--menu_padding) * -1); 
	padding-left: var(--menu_padding);
	padding-right: var(--menu_padding);
	padding-bottom: var(--menu_padding); 
	margin-bottom: var(--menu_padding); 
	border-bottom: 1px solid var(--menu_dark_line);
	text-transform: uppercase; 
	width: 100%; 
	font-size: 1rem; 
	color: var(--allsizes_color); 
	display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
}

.AllSizes h3 span {
	display: flex;
	gap: 5px;
	flex-wrap: nowrap;
}

.AllSizes input {
	color: var(--color_fixed_white);
}

#Wrap .AllSizes h3 a {
	width: auto; 
	float: right; 
	padding: 5px !important; 
}

#Wrap .AllSizes h3 a:hover {
	background: var(--menu_dark_button_background_hover);
}

#Wrap .AllSizes h3 a svg {
	margin: 0 !important; 
	display: block; 
}

.AllSizesGames .AllSizesLink {
	line-height: 30px !important;
	width: calc(100% - 10px); 
	padding: 5px !important;
	min-width: max-content; 
	height: auto;
}

.AllSizesGames {
	gap: 0;
}

.AllSizesGames img {
	border-radius: 50%;
	width: 30px;
	height: 30px;
	float: left;
	margin-right: 10px;
}

.AllSizesShare {
	top: 100%;
}
/* ALL SIZES */

/* SCREENSHOTS */
.ScreenshotSizes {
	background: var(--screenshotsize_background);
}

.ScreenshotSizesBack {
	width: calc(100% - 20px);
	height: 20px;
	float: left;
	color: var(--screenshotsize_back_color);
	background: var(--screenshotsize_back_background);
	display: flex;
	gap: 5px;
	align-items: center;
	padding: 10px;
	font-size: 1.0rem;
}

.ScreenshotSizesBack:hover {
	color: var(--screenshotsize_back_color_hover);
}

.ScreenshotSizes .Image {
	float: left;
	clear: both;
	padding: 25px;
	max-width: calc(100% - 50px);
}

.ScreenshotSizes .Image img {
	_max-width: 100%;
}

.ScreenshotSizesOptions {
	gap: 0;
	flex: 1;
	flex-wrap: nowrap;
	max-width: 50%;
}

.ScreenshotSizesEmbedContainer {
	width: auto;
	justify-content: flex-end;
	align-items: center;
	gap: 15px;
	padding: 15px;
	max-width: calc(50% - 30px);
	flex: 1;
}

.ScreenshotSizesEmbed {
	float: left;
	background: var(--screenshots_embed_background);
	width: 300px;
	max-width: calc(50% - 15px);
	height: 28px;
	border: 1px solid var(--screenshots_embed_border);
	flex-wrap: nowrap;
	gap: 0;
	border-radius: var(--border_radius);
	overflow: hidden;
}

.ScreenshotSizesEmbed label {
	float: left;
	border-right: 1px solid var(--screenshots_embed_border); 
	align-items: center;
	font-weight: bold;
	color: var(--screenshots_embed_color);
	display: flex;
	width: 30px;
	min-width: 30px;
	justify-content: center;
}

.ScreenshotSizesEmbed label svg {
	height: 60%;
}

.ScreenshotSizesEmbed input {
	border: 0;
	background: var(--color_fixed_white);
	color: var(--color_fixed_black);
	border-radius: 0px;
	width: calc(100% - 30px - 1px);
}

.ScreenshotSizesContainer {
	display: flex;
	min-height: 60px;
	gap: 0;
	background: var(--screenshotsize_container_background);
	width: 100%;
}

.ScreenshotSizesContainer .Size {
	float: left;
	width: 100px;
	max-width: 25%;
	max-width:;
	min-height: 60px;
	border-right: 1px dotted var(--screenshotsize_container_border);
	color: var(--screenshotsize_container_color);
	display: flex;
  flex-direction: row;
  align-content: center;
  flex-wrap: wrap;
}

.ScreenshotSizesContainer .Size:hover {
	color: var(--screenshotsize_container_color_hover);
}

.ScreenshotSizesContainer .Active {
	background: var(--screenshotsize_container_active_background);
}

.ScreenshotSizesContainer .Active:hover {
	color: var(--screenshotsize_container_active_color_hover);
}

.ScreenshotSizesContainer .Size big {
	font-size: 0.9rem;
	font-weight: bold;
	width: 100%;
	text-align: center;
}

.ScreenshotSizesContainer .Size small {
	font-size: 0.75rem;
	font-weight: bold; 
	width: 100%;
	text-align: center;
}
/* SCREENSHOTS */

/* NEWS */
.NewsContainer img {
	max-width: 100%;
}
/* NEWS */

/* CONTESTS */
.ContestPlayers {
	gap: 5px;
}

.ContestPlayer {
	align-items: center;
	justify-content: space-between;
}

.ContestOrder {
	line-height: 30px;
	width: 30px;
	text-align: center;
	display: inline-block;
	font-size: 0.8rem;
}

.ContestTop {
	background: var(--ranked_background);
	color: var(--color_fixed_black);
	border-radius: 15px;
	text-transform: uppercase;
}

.ContestRank {
	min-width: 10%;
}

.ContestPlayer .UserItem {
	width: auto;
	min-width: 30%;
}

.ContestPlayer .Stats {
	width: auto;
	min-width: 20%;
}

.ContestPrize {
	display: inline-block;
	background: var(--contest_prize_background);
	color: var(--color_fixed_black);
	line-height: 30px;
	padding: 0 12px;
	text-align: center;
	border-radius: 15px;
	font-size: 0.8rem;
	text-transform: uppercase;	
}

.ContestSpacing {
	min-width: 40%;
  display: flex;
  gap: var(--item_gap);
  justify-content: flex-end;
}

.ContestDetails .ItemContainer {
	flex-direction: column;
	gap: 10px;
}

.ContestDetails h3 {
	font-weight: bold;
}

.ContestDateContainer {
	align-self: stretch;
	min-width: 35%;
	flex-basis: 35%;
}

.ContestDateTimeLine {
	min-width: 20%;
	flex-basis: 20%;
	justify-content: center;
}

.ContestDateTimeLine span {
	width: 2px;
  background: var(--contest_timeline_background);
  height: calc(200% / 3 + 0.5em);
  position: relative;
}

.ContestDateTimeLine span em {
	position: absolute;
	top: 0;
	left: 0;
	width: 8px;
	height: 8px;
	background: var(--contest_timeline_point_background);
	border-radius: 50%;
  transform: translate(calc(-50% + 1px), calc(-50%));
  border: 2px solid var(--item_background);
}

.ContestDateTimeLine span em:nth-child(2) {
	top: 50%;
}

.ContestDateTimeLine span em:nth-child(3) {
	top: 100%;
}

.ContestDateTimeLine span .CurrentTimeLine {
	width: 8px;
	height: 8px;
	background: 0;
	padding: 2px;
	border-color: var(--button_pink_background);
	border-width: 2px;
	background: var(--item_background);
}

.ContestDateTimeLine span .CurrentTimeLine::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	background: var(--button_pink_background);
	border-radius: 50%;
}

.ContestDate span {
	width: 100%;
}

.ContestCurrentState {
	color: var(--button_pink_background);
	font-weight: bold;
}

.ContestHighlightPlayer, .ContestHighlightPlayer .UserLink, .ContestHighlightPlayer .Stats {
	background: var(--highlight_player_background) !important;
	color: var(--highlight_player_color) !important;
}
/* CONTESTS */

/* COMMENTS */
.LeaveComment {
	float: left;
	width: 100%;
}

.LeaveCommmentItem {
	/*_background: var(--item_background);
  _padding: 15px;
  _border-radius: var(--border_radius);*/
  gap: var(--container_padding) !important;
}

.LeaveComment h3 {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	text-transform: uppercase;
	font-size: 1.4rem;
}

.LeaveComment h3 .Button {
	margin-right: 10px;
}

.LeaveComment .Hidden {
	display: none;
}

.LeaveComment .Visible {
	display: inline;
}

.LeaveComment button {
	clear: none !important;
}

.CommentsContainer {
	gap: var(--post_form_gap);
}

.ProfileContent {
	align-items: flex-start;
}

.ProfileContent .CommentsContainer {
	padding: 0;
	width: 100%;
}

.Comments {
	float: left;
	width: 100%;
	display: flex;
	gap: var(--post_gap);
	flex-wrap: wrap;
}

.Comments:empty {
	display: none !important;
}

.CommentContainer {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	width: 100%;
}

.Comment {
	float: left;
	display: flex;
	width: calc(100% - 4px);
	/*padding: 2px;*/
	border-radius: var(--border_radius);
	/*background: var(--item_background);*/
	border: 2px solid var(--item_background);
}

.CommentUser {
	padding: var(--post_padding);
	display: flex;
	gap: var(--spacing);
	max-width: calc(50% - var(--post_padding) * 2);
	background: var(--item_background);
}

.Comments .CommentUser {
	flex-basis: calc(100% / 3 - var(--post_padding) * 2);
}

.CommentUser .FlexContainer {
	flex-direction: column;
}

.CommentUser .FlexContainer:nth-child(1) {
	min-width: 60px;
	max-width: 60px;
}

.CommentUser .FlexContainer:nth-child(2) {
	align-content: flex-start;
}

.CommentUser .CommentUserDetails {
	flex-wrap: wrap;
	display: flex;
	gap: 5px;
	flex-direction: column;
	align-items: flex-start;
}

.Column .CommentUserDetails .UserLink {
	margin-left: -5px;
}

.CommentUser img {
	width: 100%;
	float: left;
	border-radius: var(--avatar_rounded);
}

.CommentUser span {
	float: left;
	width: 100%;
	color: var(--stats_color);
	line-height: 20px;
	font-size: 0.9rem;
	display: flex;
  gap: 5px;
  align-items: center;
}

.CommentTextContainer {
	padding: 15px;
	/*background: var(--background);*/
	flex: 1;
	font-size: 1.0rem;
  line-height: 1.5em;
}

.CommentText {
	width: 100%;
	float: left;
	font-size: 1.0rem;
	line-height: 1.5em;
	color: var(--color_text);
	max-width: 100%;
	word-break: break-word;
}

.CommentText img {
	width: auto;
	height: auto;
	max-width: 100%;
}

.EditContainer {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

/*.EditContainer a:hover {
	background: var(--tag_background_hover);
  cursor: pointer;
}*/

.CommentEditForm {
	width: 100%;
	float: left;
	margin-top: 15px;
}

.CommentEditForm button {
	margin-top: 10px;
}

.CommentEdit {
	float: left;
	margin-top: 10px;
}

.CommentEdit a {
  margin-right: 5px;
}

.NotifyComment, .NotifyComplete {
	background: var(--notify_backgroud);
	float: left;
	text-align: center;
	flex-basis: 100%;
	min-width: 100%;
	border-radius: 5px;
	font-size: 1.0rem;
	line-height: 2.0em;
	color: var(--color_fixed_black);
}

.NotifyItemsContainer {
	--items: 5;
	--gap: 5px;
	gap: var(--gap);
	align-items: stretch;
	margin-top: -10px;
}

.NotifyItemsContainer .NotifyItemContainer {
	flex-basis: calc(100% / var(--items) - var(--gap) / var(--items) * (var(--items) - 1));
	min-width: calc(100% / var(--items) - var(--gap) / var(--items) * (var(--items) - 1));
	display: flex;	
	gap: 10px;
	flex-wrap: nowrap;
	align-content: flex-start;
}

.NotifyItemComplete {
	background: var(--notify_backgroud);
	color: var(--color_fixed_black);
}
/* COMMENTS */

/* TIMELINE */
.TimelineContainer {
	float: left;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	font-size: 0.9rem;
	font-weight: normal;
	color: var(--stats_color);
	gap: 15px;
}

.TimelineContainer span svg {
	margin-right: 5px;
}

.TimelineContainer::after, .TimelineContainer::before {
	content: '';
	flex: 1;
	background: var(--timeline_color);
	height: 1px;
}
/* TIMELINE */

/* EXPAND */
.ExpandContainer {
	float: left;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.Column .ExpandContainer {
	margin-top: 0;
}

.ExpandContainer::after, .ExpandContainer::before {
	content: '';
	flex: 1;
	background: var(--expand_background);
	height: 1px;
}

.ExpandContainer a {
	color: var(--link_red);
	line-height: 30px;
	display: inline-block;
	padding: 0 6px 0 10px;
	text-align: center;
	/*border: 1px solid var(--expand_background);*/
	border-radius: var(--border_radius);
	font-size: 0.8rem;
	width: auto;
	margin: 0 10px;
}

.ExpandContainer a svg {
	height: 1.7em;
	margin: 0;
	margin-top: -0.3em;
	margin-left: 5px;
}

.ExpandContainer a:hover {
	background-color: var(--expand_background);
	text-decoration: none;
	color: var(--color_black);
}

.CommentsContainer .ExpandContainer {
	margin-top: 25px;
}

.MessagesLoad .ExpandContainer {
	width: calc(100% - 15px);
}
/* EXPAND */

/* TAGS */
.TagsContainer {
	margin-left: auto;
	display: flex;
	gap: 5px;
}

.Tags {
	float: left;
	width: 30px; 
	height: 30px;
	position: relative;
}

.Tags .AllSizes {
	bottom: calc(100% + 5px) !important;
	right: 0 !important;
	left: auto;
	top: auto;
	border: 0; 
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0px 8px rgba(0, 0, 0, 0.4); 
}

.Tags .AllSizesLink {
	font-size: 0.8rem;
	padding: 8px !important;
	width: calc(100% - 16px);
}

.ColorTags {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	min-width: calc(9.0em + 26px);
	padding: 5px;
}

.ColorTag {
	float: left;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	border: 5px var(--menu_dark_background) solid;
}

.ColorTag:hover {
	border-color: var(--menu_dark_button_background_hover);
}

.EmoticonsContainer {
	float: left;
	padding: 10px;
	width: calc(100% - 20px);
}

.EmoticonsSearch {
	border-bottom: 1px solid var(--menu_dark_line);
}

.EmoticonsList {
	--items: 10;
	--gap: 10px;
	--size: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	margin: 10px;
	min-width: calc(var(--size) * var(--items) + (var(--items) - 1) * var(--gap) + 20px);
}

.EmoticonsSearchList {
	min-width: calc(var(--size) * var(--items) + (var(--items) - 1) * var(--gap) + 20px + 50px);
}

.EmoticonsList span {
	font-size: 0.9rem;
	width: 100%;
	margin: 10px 0;
	color: var(--nav_item_color);
}

.Emoticons {
	width: min-content;
	display: flex;
	flex-wrap: nowrap;
}

.Emoticons a {
	top: 0;
}

.Emoticons a img {
	width: var(--size);
	height: var(--size);
	float: left;
}

.Emoticons a .Sticker {
	width: calc(var(--size) * 2 + var(--gap));
	height: calc(var(--size) * 2 + var(--gap));
}

.Emoticons p {
	font-weight: bold;
	font-size: 0.9rem;
	width: 100%;
	margin-top: 10px;
	color: var(--nav_item_color);
}

.Emoticons p:first-child {
	margin-top: 0;
}

.EmoticonsNav {
	background: var(--menu_dark_nav_background);
	color: var(--nav_item_color);
	width: 30px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-content: flex-start;
	border-bottom-left-radius: var(--border_radius);
}

.EmoticonsNav .EmoticonsNavLink {
	display: flex;
	align-items: center;
  justify-content: center;
	width: 30px;
	height: 30px;
	cursor: pointer;
	border-radius: var(--border_radius);
	position: relative;
}

.EmoticonsNav .EmoticonsNavLink:hover {
	background: var(--menu_dark_nav_color_hover);
}

.EmoticonsNav .EmoticonsNavLink:hover .Pop {
	transition-delay: 500ms;
	opacity: 1.0;
}
/* TAGS */

/* LIKE */
#LikeButton .Button span, #SubscribeButton .Button span {
	display: flex;
	height: 100%;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.Liking a:hover {
	background: var(--button_pink_background) !important;
}
/* LIKE */

/* GENERAL */
.NoItems {
	float: left !important;
	color: var(--color_text) !important;
	font-weight: normal;
	font-size: 0.9rem !important;
	width: 100%;
	min-height: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
} 

.NoItems span {
	width: 100%;
  text-align: center;
}

.NoItemsLarge {
	gap: 10px;
	font-size: 1.2rem !important;
}

.Confirm {
	color: var(--confirm);
}

.Reject {
	color: var(--reject);
}

.Green {color: var(--green) !important;}
.Turquoise {color: var(--turquoise) !important;}
.Blue {color: var(--blue) !important;}
.Orange {color: var(--orange) !important;}
.Red {color: var(--red) !important;}
.Pink {color: var(--pink) !important;}
.Purple {color: var(--purple) !important;}
.Yellow {color: var(--yellow) !important;}
.Mint {color: var(--mint) !important;}
.Lime {color: var(--lime) !important;}

.Tags .Green {background: var(--green) !important;}
.Tags .Turquoise {background: var(--turquoise) !important;}
.Tags .Blue {background: var(--blue) !important;}
.Tags .Orange {background: var(--orange) !important;}
.Tags .Red {background: var(--red) !important;}
.Tags .Pink {background: var(--pink) !important;}
.Tags .Purple {background: var(--purple) !important;}
.Tags .Yellow {background: var(--yellow) !important;}
.Tags .Mint {background: var(--mint) !important;}
.Tags .Lime {background: var(--lime) !important;}

.Spoiler {
	border: 2px solid var(--quote_border);
	padding: 10px;
	font-size: 1.0rem;
	color: var(--color_gray_2);
	border-radius: 4px;
	width: calc(100% - 20px - 4px) !important;
	display: inline-flex !important;
  flex-wrap: wrap;
  gap: 10px;
}

.SpoilerHeader {
	font-size: 1.2rem;
	text-transform: uppercase;
	font-weight: bold;
	display: flex;
	width: 100%;
	line-height: 30px;
	align-items: center;
	gap: 5px;
}

.SpoilerHeader .Button {
	margin-left: auto;
}

.SpoilerText, .SpoilerHide {
	display: none;
}

.Quote {
	border: 2px solid var(--quote_border);
	padding: 10px;
	font-size: 1.0rem;
	color: var(--color_gray_2);
	border-radius: 4px;
	width: calc(100% - 20px - 4px) !important;
	display: inline-block !important;
	/*flex-wrap: wrap;*/
	/*gap: 10px;*/
}

.Quote .UserItem {
	display: inline-flex !important;
	width: 100% !important;
	padding-bottom: 10px;
}

.Quote .QuoteMark {
	padding-left: 5px;
	font-size: 2.0rem;
	line-height: 1.0rem;
	vertical-align: middle;
}

.Quote .QuoteMark:first-child {
	padding: 0;
	padding-right: 5px;
}

.HiddenMessage {
	padding: 10px;
	width: calc(100% - 30px);
	border-radius: var(--border_radius);
	border: 5px solid var(--admin_color);
	float: left;
	display: flex;
	gap: 10px;
	flex-direction: column;
}

.HiddenMessageTitle {
	font-size: 1.2rem;
	text-transform: uppercase;
	color: var(--admin_color);
	font-weight: bold;
	width: 100%;
	display: inline-block;
}

.HiddenMessageTitle svg {
	margin-right: 5px;
}

.VideoPlayer {
	width: 100%;
	position: relative;
}

.VideoPlayer iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.Italic {
	font-family: georgia, serif;
}

.Link {
	color: var(--link_default);
	/*transition: 0.3s ease-in-out;*/
}

.Link:hover {
	color: var(--link_default_hover);
}

.UserLink {
	font-weight: bold;
	color: var(--link_red);
	/*transition: 0.3s ease-in-out;*/
}

.UserLink:hover {
	text-decoration: none;
	color: var(--link_red_hover);
}

.TextLink {
	font-weight: bold;
	_color: var(--link_text);
}

.TextLink:hover {
	text-decoration: none;
	_color: var(--link_text_hover);
}

.TextLink:has(img) svg {
	display: none;
}

.ProfileLink svg {
	margin-right: 5px;
}
/* GENERAL */

/* EMOTICON */
.Emoticon, .CommentText .Emoticon {
	height: 1.5em;
	vertical-align: middle;
}

.Sticker, .CommentText .Sticker {
	height: 6em;
	vertical-align: middle;
}
/* EMOTICON */

/* PROFILE */
.ProfileHeaderContainer {
	background: var(--media_header_gray) !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: nowrap;
	gap: 0 !important;
}

.ProfileLevel {
	background: var(--profile_level_background);
	display: flex;
	align-items: center;
	padding: var(--profile_padding);
	color: var(--color_fixed_white);
	font-size: 1.4rem;
	font-weight: bold;
	border-top-left-radius: var(--border_radius);
	border-bottom-left-radius: var(--border_radius);
}

.ProfileLevel svg {
	margin-right: 5px;
}

.ProfileHeader {
	flex-wrap: nowrap;
	padding: var(--profile_padding);
	width: auto;
	flex: 1;
}

.ProfileUser {
	align-items: center;
	gap: 10px !important;
	flex-wrap: nowrap;
}

.ProfileTitle {
	gap: 0 !important;
	flex-direction: column;
	align-content: flex-start !important;
}

.ProfileTitle a {
	color: var(--color_fixed_white);
	font-size: 2.0rem;
}

.ProfileTitle a:hover {
	color: var(--media_header_link_hover);
}

.ProfileTitles {
	display: flex;
	gap: 15px;
}

.ProfileTitles span {
	display: flex;
	gap: 5px;
}

.ProfileTabs {
	float: left;
	width: 20%;
	min-width: 20%;
}

.ProfileUserContent {
	font-size: 0.9rem;
	line-height: 1.5em;
	word-break: break-word;
}

.ProfileUserStats {
	padding: var(--item_padding);
	gap: 0 !important;
}

.ProfileUserStats p {
	min-width: 100%;
	display: flex;
	justify-content: space-between;
}

.Profile {
	width: calc(80% - 30px - 10px);
}

.ProfileSummary {
	gap: var(--profile_gap);
}

.Profile .FilterContainer {
	width: 100%;
}

.Profile .ItemContainer {
	gap: 5px;
}

.UserGamingItem {
	flex-wrap: nowrap;
}

.UserGamingItem .FlexContainer {
	align-content: flex-start;
}

.UserGamingItem .Stats {
	flex-wrap: wrap;
	gap: 5px;
}

.UserGamingItem .Stats span {
	width: 100%;
}

.UserGameStatsContainer {
	gap: 5px;
}

.UserGameStats {
	gap: 10px !important;
}

.UserGameStatsContainer .ItemContainer {
	padding: 10px 0;
	width: 100%;
	gap: 5px !important;
}

.UserGameStats .UserGameStatsColumn {
	display: flex;
	align-items: center;
	padding: 0 10px;
}

.UserGameStats .UserGameStatsColumn:nth-child(1) {
	width: 40%;
}

.UserGameStats .UserGameStatsColumn:nth-child(2), .UserGameStats .UserGameStatsColumn:nth-child(3) {
	width: 30%;
}

.CompareUserStats {
	margin-bottom: 10px;
	background: 0;
	width: 100%;
	padding: 0 !important;
}

.CompareUserStats .UserGameStatsColumn {
	gap: 10px;
	flex-wrap: wrap;
	background: var(--item_background);
	padding: 10px;
	border-radius: var(--border_radius);
}

.CompareResults {
	display: flex;
	gap: 0 !important;
	align-items: center;
}

.CompareWin {
	background: var(--ranked_background);
	color: var(--color_fixed_black);
	border-radius: 10px;
	height: 20px;
	width: 20px !important;
	text-align: center;
	display: inline-block;
	font-size: 0.8rem;
	margin-right: 5px;
	display: flex;
  justify-content: center;
  align-items: center;
}

.UserFriends {
	gap: 5px;
}

.UserFriends .ItemContainer {
  justify-content: space-between;
  align-items: center;
}

.UserFriends .UserItem {
	width: auto;
}

.Sound {
	position: relative;
	visibility: hidden;
	overflow: hidden;
	display: none;
}

.GraphBarContainer {
	width: calc(100% - 10px);
	height: 20px;
	padding: 0 5px;
	position: relative;
	border-radius: 10px;
	background: var(--graph_background);
	overflow: hidden;
	display: flex;
	align-items: center;
}

.GraphBarFill {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
	background: var(--graph_fill);
	z-index: 0;
}

.GraphBarText {
	position: relative;
	z-index: 1;
	color: var(--graph_color);
	font-size: 0.7rem;
	text-align: center;
	width: 100%;
}

.ProfileItemsContainer {
	gap: 5px !important;
}

.AchievementItem {
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 10px !important;
}

.AchievementIcon {
	flex-basis: 0;
	font-size: calc(1.875rem * 0.75);
	min-width: calc(3.125rem * 0.75);
	min-height: calc(3.125rem * 0.75);
	border-radius: 50%;
	background: var(--ranked_background);
	color: var(--color_fixed_black);
	display: flex;
  align-items: center;
  justify-content: center;
  flex: 0;
}

.AchievementContainer {
	justify-content: space-between !important;
}

.AchievementCompleted {
	background: var(--ranked_background);
	color: var(--color_fixed_black);
	line-height: 20px;
	border-radius: 10px;
	padding: 0 8px;
	font-size: 0.7rem;
	text-transform: uppercase;
}

.AchievementLocked {
	background: var(--achievement_locked_background);
	color: var(--color_fixed_black);
	line-height: 20px;
	border-radius: 10px;
	padding: 0 8px;
	font-size: 0.7rem;
	text-transform: uppercase;
}

.FriendsContainer {
	background: var(--background);
	border-radius: var(--border_radius);
	overflow: hidden;
	gap: 2px !important;
	padding: var(--container_padding);
}

.FriendsContainer .ExpandContainer {
	/*padding: 15px;*/
	margin-top: var(--spacing);
}

.FriendsTitle {
	background: var(--friends_title_background);
	color: var(--color_white);
	width: calc(100% - 20px);
	padding: 10px;
	margin-bottom: 1px;
	border-radius: var(--border_radius);
}

.FriendsTitle:hover {
	color: var(--color_white);
	background: var(--friends_title_background_hover);
}

.FriendsList {
	overflow: hidden;
	display: flex;
	align-items: center;
	width: 100%;
	align-items: flex-start;
}

.FriendsList .FlexContainer {
	padding: 10px;
	align-content: center;
}

.FriendsListContainer {
	gap: 0 !important;
}

.FriendListHidden {
	height: 0;
}

.FriendsListBase {
	width: 100%;
}

.ProfileBrowse {
	gap: 15px;
}

.ProfileBrowse .VideoContainer {
	padding: 0;
	flex-wrap: nowrap;
	align-items: flex-start;
	width: 100%;
}

.ProfileBrowse .VideoContainer .Thumb {
	max-width: 25%;
}

.ProfileBrowse .VideoContainer p {
	font-size: 0.9rem;
}

.EditProfileActive {
	display: flex;
}

.Avatars {
	display: flex;
	--gap: 2px;
	--avatars: 12;
	gap: var(--gap);
	flex-wrap: wrap;
	width: 100%;
}

.Avatars a {
	max-width: calc(100% / var(--avatars) - 10px - var(--gap) / var(--avatars) * (var(--avatars) - 1));
	flex-basis: calc(100% / var(--avatars) - 10px - var(--gap) / var(--avatars) * (var(--avatars) - 1));
	border: 5px solid transparent;
	border-radius: var(--avatar_rounded);
	transition: 0.3s ease-in-out;
}

.Avatars img {
	float: left;
	width: 100%;
	border-radius: var(--avatar_rounded);
}

.Avatars .Selected {
	border-color: var(--avatar_select);
}

.LinkedAccounts label {
	font-size: 1.4rem;
}

.LinkAccountsContainer {
	--items: 2;
	--gap: 10px;
	gap: var(--gap);
	align-items: stretch;
}

.LinkAccountsContainer .FlexContainer {
	align-content: flex-start;
}

.LinkAccountsContainer h2 {
	text-transform: none;
}

.LinkAccountContainer {
	padding: 15px;
	flex-basis: calc(100% / var(--items) - 30px - var(--gap) / var(--items) * (var(--items) - 1));
	min-width: calc(100% / var(--items) - 30px - var(--gap) / var(--items) * (var(--items) - 1));
	display: flex;	
	gap: 10px;
	flex-wrap: nowrap;
	align-content: flex-start;
}

.LinkAccountContainer .Thumb {
	max-width: 20%;
}

.LinkAccountInfo {
	display: flex;
	gap: 0;
	align-items: center;
}

.LinkAccountInfo svg {
	margin-right: 5px;
}

.LinkAccountContainer .Premium {
	font-weight: bold;
	color: var(--premium_color);
}

.LinkAccountContainer h4 {
	align-items: center;
	gap: 10px;
	width: 100%;
}

.LinkAccountContainer h4 svg {
	height: 30px;
}

.Banned {
	font-weight: bold;
	color: var(--banned_color);
}

.ChartContainer {
	width: 150%;
}
/* PROFILE */

/* ACTIVITY */
.ActivityContainer {
	gap: var(--post_gap);
}

.ActivityDate {
	float: left;
	font-weight: bold;
	padding: 5px;
	width: 100%;
}

.Activity {
	float: left;
	border: 2px solid var(--activity_background);
	width: 100%;
	border-radius: var(--border_radius);
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	overflow: hidden;
}

.ActivityIcon {
	width: 10%;
	float: left;
	background: var(--activity_background);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--activity_color);
}

.ActivityIcon svg {
	width: 60px;
	height: 60px;
	max-width: 50%;
}

.ActivityItem {
	padding: 15px;
	width: calc(100% - 30px);
}

.ActivityItem .ThumbLikesContainer {
	max-width: calc(25% * 1.5) !important;
}

.Profile .ActivityItem .ThumbLikesContainer {
	max-width: calc(30% * 1.5) !important;
}

.ActivityItem .Thumb {
	max-width: 25% !important;
}

.Profile .ActivityItem .Thumb {
	max-width: 30% !important;
}

.ActivityContent {
	flex-wrap: nowrap;
	width: 100%;
	word-break: break-word;
}

.ActivityContent .FlexContainer {
	gap: 5px;
	align-content: flex-start;
	color: var(--stats_color);
}

.ActivityContent .FlexContainer:empty {
	display: none;
}

.ActivityContent:has(.FlexContainer:empty) {
	display: none !important;
}

.ActivityContent .FlexContainer a {
	min-width: 100%;
}

.ActivityTitle {
	justify-content: space-between;
	min-width: 100%;
	flex-wrap: nowrap;
	align-items: center;
}

.ActivityTitle .Stats {
	width: auto;
	flex-shrink: 0;
}

#ActivityLoad {
	display: none;
}

#ActivityUpdate {
	display: none;
}
/* ACTIVITY */

/* AVATAR */
.AvatarContainer {
	display: inline-block; 
	height: 100%; 
	position: relative; 
	flex-shrink: 0;
}

.AvatarContainer img {
	width: auto; 
	height: 100%; 
	border-radius: 50%; 
}

.AvatarContainer .StateBlip {
	position: absolute; 
	bottom: 0; 
	right: 0; 
	width: 30%; 
	height: 30%; 
	border-radius: 50%; 
}

.AvatarContainer .AvatarCounter {
	position: absolute; 
	bottom: 0; 
	right: 0; 
	width: 18px; 
	height: 18px; 
	text-align: center; 
	line-height: 18px; 
	font-style: normal; 
	font-size: 0.7rem; 
	color: var(--notification_color); 
	background: var(--notification_background);
	border-radius: 50%; 
}

.StatusIcon {
	display: flex;
	gap: 10px;
	align-items: center;
	float: left;
}

.StatusIcon em {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}

.Online {
	background: var(--online_background); 
}

.Away {
	background: var(--away_background); 
}

.Offline {
	background: var(--offline_background); 
}

.Busy {
	background: var(--busy_background); 
}
/* AVATAR */

/* STATS */
.Stats {
	float: left;
	clear: both;
	width: 100%;
	font-size: 0.9rem;
	font-weight: normal;
	color: var(--stats_color);
	display: flex;
	align-items: center;
	gap: 15px;
}

.Stats span {
	display: flex;
	gap: 5px;
	align-items: center;
}

.StatsRemaining {
	color: var(--contest_remaining);
	font-weight: bold;
}
/* STATS */

/* NOTIFICATIONS */
.NotificationsContainer {
	gap: 5px;
}

#Header .NotifyContainer {
	min-width: 300px; 
}

#Header .NotifyItems {
	gap: 5px;
}

#Header .NotifyItems .NotifyItem {
	border-radius: var(--border_radius);
	padding: 10px;
}

.NotifyItem {
	align-items: center;
	float: left; 
	width: 100%;
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
	cursor: pointer;
}

.Content .NotifyItem {
	background: var(--item_background);
	border-radius: var(--border_radius);
	padding: 10px;
}

.NotifyItem:hover {
	background: var(--item_background_hover);
}

#Header .NotifyItem:hover {
	background: var(--menu_dark_button_background_hover);
}

.NotifyItem .FlexContainer {
	gap: 5px;
}

#Header .NotifyItem p {
	color: var(--color_gray_5); 
	font-size: 0.9rem !important; 
	line-height: 1.5em;
	white-space: break-spaces;
}

.NotifyItem .New svg {
	height: 20px;
	width: 20px;
}

.NotifyItem .NewIcon {
	background: var(--new_background);
	width: 20px;
	height: 20px;
	justify-content: center;
	display: flex;
	align-items: center;
	color: var(--color_fixed_white);
	border-radius: 4px;
}

.NotifyItem .NewIcon svg {
	height: 80%;
	margin: 0;
}

.NotifyItem .Stats {
	font-size: 0.8rem;
}

.NotifyItem .UserLink {
	color: var(--link_red); 
}

.NotifyItem .UserLink:hover {
	color: var(--link_red_hover); 
}

#Header .NotifyItem a:not(.UserLink) {
	color: var(--link_header); 
}

#Header .NotifyItem a:not(.UserLink):hover {
	color: var(--link_header_hover); 
}
/* NOTIFICATIONS */

/* SETTINGS */
.Settings {
	float: left;
	width: 100%;
	display: flex;
	gap: 5px;
	flex-direction: column;
}

.SettingsItem {
	float: left;
	width: 100%;
	height: 30px;
	font-weight: normal;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.SettingsTitle {
	float: left;
}

.SettingsOptions {
	display: flex;
	border: 0.125rem solid var(--color_black);
	border-radius: 0.25rem;
	height: 1.2rem;
	padding: 0.125rem;
	gap: 0.125rem;
}

.SettingsOption {
	float: left; 
	font-weight: bold; 
	padding: 0 0.5rem !important; 
	height: 1.2rem; 
	font-size: 0.8rem !important; 
	text-transform: uppercase; 
	line-height: 1.2rem !important; 
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 0.125rem; 
	color: var(--color_black);
}

.SettingsOption:has(svg) {
	padding: 0 !important;
	width: 1.2rem;
}

.SettingsOption svg {
	height: 80%;
}

.SettingsOptionActive {
	color: var(--button_pink_color) !important; 
	background: var(--button_pink_background); 
}

.SettingsItem input {
	display: none;
}
/* SETTINGS */

/* COLUMN */
.ColumnItem {
	float: left;
	border-radius: var(--border_radius);
	padding: 10px;
	width: calc(100% - 20px);
	background: var(--item_background);
	color: var(--color_black);
	transition: 0.3s ease-in-out;
	display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ColumnItem:hover {
	color: var(--color_black);
	background: var(--item_background_hover);	
}

.ColumnItem span {
	display: flex;
  flex-wrap: nowrap;
  gap: 5px;
}

.ColumnItem .Stats {
	font-size: 0.9rem;
}
/* COLUMN */

/* ADVERTISEMENTS */
.AdvertisementContainer {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 10px;
}

.GoogleAdvertisement {
	min-height: 5.625rem;
}

.Column .GoogleAdvertisement {
	min-height: 18.75rem;
}

.ForumContainer .AdvertisementContainer {
	padding: 10px 0;
}

.AdvertisementContainer img {
	float: left;
}

.AdvertisementBackground {
	background: var(--background);
  padding: 15px;
	width: calc(100% - 30px);
	border-radius: var(--border_radius);
}

.Container .AdvertisementBackground {
	padding: 0;
	width: 100%;
}

.Advertisement {
	flex-basis: 100%;
	border-radius: var(--border_radius);
	display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.ShopAdvertisement {
	display: flex;
}

.ShopAdvertisement a {
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	color: var(--color_fixed_white);
	font-weight: normal;
	background: var(--shop_advertisement);
	transition: 3.0s;
	border-radius: var(--border_radius);
}

.ShopAdvertisement a:hover {
	background: var(--shop_advertisement_hover);
}

.ShopAdvertisement span {
	display: flex;
	gap: 5px;
	width: 100%;
}

.ShopAdvertisementTitle {
	font-size: 1.2rem;
	font-weight: bold;
}
/* ADVERTISEMENTS */

/* CHAT */
.Chat {
	/*float: left;*/
	width: 100%;
	display: flex;
	/*flex-wrap: wrap;*/
	gap: var(--container_gap);
	overflow: hidden;
	border-radius: var(--border_radius);
	background: var(--background);
	/*padding: 1.0rem;
	padding-top: 0;*/
	padding: var(--container_padding);
	/*--chat_main_width: 75%;
	--chat_panel_width: calc(100% - var(--chat_main_width));*/
	height: calc(100svh - var(--header_height) - var(--container_padding) * 2 - var(--module_gap) * 2 - var(--messages_height));
	align-content: flex-start;
	flex-direction: column;
}

.Chat h2 {
	/*height: var(--chat_title_height);*/
	display: flex;
	align-items: center;
	/*font-size: 1.0rem;*/
	text-transform: uppercase;
}

#Chat {
	height: 100%;
	width: 100%;
}

#ChatColumn {
	display: flex;
	flex-wrap: wrap;
	gap: var(--module_gap);
	height: calc(100svh - var(--header_height) - var(--container_padding) * 2 - 45px);
}

#ChatColumn .Container:nth-child(1) {
	height: calc(45% - var(--module_gap) / 2 - var(--container_padding) * 2);
}

#ChatColumn .Container:nth-child(2) {
	height: calc(55% - var(--module_gap) / 2 - var(--container_padding) * 2);
}

/*.Chat .ChatMain {
	width: var(--chat_main_width);
}

.Chat .ChatPanel {
	width: var(--chat_panel_width);
}*/

.ChatWindow {
	float: left;
	/*width: calc(var(--chat_main_width) - 10px);*/
	width: 100%;
	height: 100%;
	/*height: calc(var(--chat_rooms_height) + var(--chat_users_height) + var(--chat_title_height) - 10px - var(--chat_input_height));*/
	/*height: var(--chat_window_height);*/
	/*margin-bottom: 10px;
	margin-right: 10px;*/
	position: relative;
	/*overflow-y: auto;*/
}

.ChatContainer {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	/*min-height: 100%;*/
	height: 100%;
	overflow-y: auto;
}

.ChatContainer #Trim {float: left; width: 100%;} 

.ChatContainer p {
	/*min-height: calc(calc(var(--chat_rooms_height) + var(--chat_users_height) + var(--chat_title_height) - 10px - var(--chat_input_height)) / var(--chat_messages));*/
	float: left;
	width: 100%;
	display: flex;
	align-items: center;
	line-height: 30px;
	gap: 5px;
}

.ChatDate {
	color: var(--color_text);
	font-weight: normal;
	font-size: 0.7rem;
  line-height: 30px;
}

.ChatContainer p strong {
	color: var(--chat_color);
	font-size: 1rem;
	line-height: 30px;
}

.ChatContainer em {
	font-style: normal;
	font-weight: normal;
	color: var(--color_text);
	font-size: 1rem;
	line-height: 30px;
}

.ChatAlert {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
  justify-content: center;
}

.ChatAlert span {
	padding: 15px;
	border-radius: var(--border_radius);
	background: var(--notify_backgroud);
	color: var(--color_fixed_black);
	display: flex;
	gap: 5px;
	flex-wrap: nowrap;
	font-weight: bold;
}

/*.ChatPanelContainer {
	background: var(--background);
	padding: var(--container_padding);*/
	/*float: right;*/
	/*width: calc(var(--chat_panel_width));*/
	/*width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	display: flex;
	gap: var(--container_gap);
	flex-wrap: wrap;
	align-content: flex-start;
}

.Column .ChatPanelContainer .FlexContainer {
	gap: 5px;
}*/

.ChatColumnContainer::-webkit-scrollbar {
  margin-left: 10px;
}

.ChatColumnContainer {
	overflow-x: hidden;
	overflow-y: auto;
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	max-height: calc(100% - var(--container_padding) * 2);
	width: 100%;
}

/*.ChatRooms {
	height: var(--chat_rooms_height);
}

.ChatUsers {
	height: var(--chat_users_height);
}*/

/*.ChatPanelContainer .ChatPanelItem {
	float: left;
	font-size: 0.9rem;
	display: flex;
	padding: 0.5rem;
	height: 1.2rem;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: var(--chat_item_background);
	color: var(--chat_item_color);
	font-weight: bold;
	border-radius: var(--border_radius);
	line-height: normal;
	margin-right: 5px;
}*/

/*.ChatRooms .ChatPanelItem {
	justify-content: space-between;
}

.ChatPanelContainer .ChatPanelItem:hover {
	background: var(--chat_item_background_hover);
	color: var(--chat_item_color_hover);
}

.ChatPanelContainer .ChatPanelItem:hover em {
	color: var(--chat_item_color_hover);
}*/

.ChatColumnItem {
	font-size: 1rem;
	display: flex;
	padding: var(--chat_item_padding);
	align-items: center;
	gap: 10px;
	width: calc(100% - var(--chat_item_padding) * 2 - var(--chat_item_gap));
	height: 20px;
	background: var(--item_background);
	color: var(--chat_item_color);
	font-weight: bold;
	border-radius: var(--border_radius);
	line-height: normal;
	/*margin-right: 5px;*/
}

.ChatColumnItem:hover {
	background: var(--item_background_hover);
}

.ChatColumnContainer .Selected {
	background: var(--tab_item_select_background) !important;
	cursor: pointer;
	color: var(--tab_item_select_color) !important;
}

.ChatColumnContainer .Selected em {
	color: var(--tab_item_select_color) !important;
}

/*.ChatPanelContainer em {
	color: var(--chat_item_value_color);
	font-size: 0.8rem;
	font-style: normal;
}*/

.ChatColumnItem em {
	color: var(--chat_item_value_color);
	font-size: 0.8rem;
	font-style: normal;
}

.ChatRooms .ChatColumnItem {
	justify-content: space-between;
}

.ChatUsers img {
	width: 20px;
	height: 20px;
	/*float: left;*/
	border-radius: var(--avatar_rounded);
}

.ChatInput {
	position: relative;
	float: left;
	/*width: calc(var(--chat_main_width) - 10px - 2px);*/
	width: 100%;
	height: 28px;
	min-height: 28px;
	border: 1px solid var(--form_border);
	border-radius: var(--border_radius);	
}

.ChatInput form {
	height: 100%;
}

.ChatInput input {
	border: 0;
	font-family: Inter, helvetica, arial, tahoma;
	color: var(--color_text);
	/*height: calc(var(--chat_input_height) - 2px);*/
	height: 100%;
}

/*.ChatInput .ChatType {
	color: var(--color_text);
	font-family: Inter, helvetica, arial, tahoma;
}*/
/* CHAT */

/* FAQ */
.FaqContainer h4 {
	color: var(--color_black);
}
/* FAQ */

/* DOCS */
.DocsContainer h3 {
	font-size: 1.2rem  !important;
}

.DocsContainer p {
	font-size: 1rem !important;
}

.Banners input {
	width: 25rem;
	font-size: 0.8rem;
}

.Banners img {
	max-height: 25rem;
}
/* DOCS */

/* GENERAL */
.UserTitle {
	color: var(--title_color) !important;
	font-weight: bold;
}

.UserOnline {
	font-weight: bold;
	color: var(--online_background) !important;
}

.UserAdmin {
	font-weight: bold;
	color: var(--admin_color) !important;
}

.UserHelper {
	color: var(--helper_color) !important;
}

.Tokens {
	font-weight: bold;
	color: var(--token_color) !important;
	gap: 0 !important;
}

.Tokens svg {
	margin-right: 5px;
}

.Vouchers {
	font-weight: bold;
	color: var(--voucher_color) !important;
	gap: 5px !important;
}

.GameMoney {
	font-weight: bold;
	color: var(--gamemoney_color) !important;
}

.XP {
	color: var(--xp_color);
	font-weight: bold;
}

.ExternalLink svg {
	margin-left: 5px;
}

.DownloadLink {
	display: flex;
}

.DownloadLink svg {
	margin-right: 5px;
}
/* GENERAL */

/* FILTER */
.FilterDark {
	background: var(--filter_dark_background);
	color: var(--filter_dark_color);
	--form_color: var(--filter_dark_color);
}

.FiltersContainer {
	justify-content: space-between;
	flex-wrap: nowrap;
}

.FilterSpacing {
	gap: 20px;
	display: flex;
	width: auto;
}

.FilterSpacing .FlexContainer {
	gap: 5px;
}

.FilterSpacing:nth-of-type(2) {
	justify-content: end;
	width: auto;
}

.FilterContainer {
	display: flex;
	position: relative;
	align-items: center;
}

.FilterContainer .FilterLabel {
	float: left;
	font-size: 0.8rem;
	font-weight: bold;
	color: var(--form_color); 
	display: inline-block;
	margin-right: 10px;
}

.FilterContainer .FilterSelect {
	float: left;
	height: 28px;
	border: 1px solid var(--form_border);
	color: var(--form_color); 
	padding: 0 6px 0 10px; 
	background: 0; 
	border-radius: var(--border_radius);
	font-size: 0.8rem; 
	font-weight: normal;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.FilterContainer .FilterSelect span {
	flex-shrink: 0;
	width: auto;
  float: left;
}

.FilterContainer .FilterSelect svg {
	height: 75%;
	margin-left: 5px;
}

.FilterSelected {
	background: var(--button_pink_background);
	color: var(--button_pink_color);
}

.Calendar {
	flex-wrap: wrap;
	display: flex;
	gap: 10px;
}

.CalendarTitle {
	justify-content: space-between;
	align-items: center;
}

.CalendarTitle .Button {
	background: 0;
	color: var(--link_red) !important;
	user-select: none;
}

.CalendarTitle .Button:hover {
	background: var(--menu_dark_button_background_hover) !important;
}

.CalendarCurrent {
	color: var(--color_fixed_white);
	font-weight: bold;
	font-size: 1.0rem;
	user-select: none;
}

.CalendarItems {
	--items: 7;
	--gap: 5px;
	gap: var(--gap);
	align-items: stretch;
}

.CalendarItem {
	flex-basis: calc(100% / var(--items) - var(--gap) / var(--items) * (var(--items) - 1));
	min-width: calc(100% / var(--items) - var(--gap) / var(--items) * (var(--items) - 1));
	display: flex;	
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	height: 25px;
	font-size: 0.9rem;
	border-radius: 4px;
	user-select: none;
}

.CalendarFilter {
	min-width: auto !important;
}

.CalendarFilterInput {
	justify-content: flex-start !important;
	padding: 0 10px 0 6px !important;
	gap: 5px;
}

.CalendarFilterInput svg {
	margin: 0 !important;
}

span.CalendarItem {
	font-weight: bold;
	color: var(--calendar_item);
}

span.CalendarInactive {
	font-weight: normal;
}

a.CalendarItem {
	font-weight: normal;
	color: var(--link_red);
}

a.CalendarItem:hover {
	background: var(--menu_dark_button_background_hover);
}

a.CalendarSelect, a.CalendarSelect:hover {
	color: var(--color_fixed_white);
	background: var(--link_red);
}
/* FILTER */

/* LISTING */
.Listing {
	width: 100%;
	text-align: center;
	float: left;
	clear: both;
	cursor: default;
	display: flex;
	justify-content: center;
	gap: 3px;
}

.Listing a, .Listing span {
	background: var(--listing_background);
	color: var(--listing_color);
	font-weight: bold;
	font-size: 0.8rem;
	padding: 0 15px;
	line-height: 30px;
	display: inline-block;
	border-radius: 4px;
}

.Listing .ListingBlank {
	padding: 0 5px;
}

.Listing .ListingIcon {
	padding: 0 5px;
	line-height: 25px;
	color: var(--button_color);
}

.Listing .ListingBlank {
	color: var(--button_color);
}

.Listing svg {
	height: 1.25rem;
}

.Listing a:hover {
	background: var(--listing_background_hover);
	color: var(--listing_color_hover);
	text-decoration: none;
}

.Listing .InactiveListing, .Listing .InactiveListing:hover {
	background: var(--listing_inactive_background) !important;
	color: var(--listing_inactive_color);
	cursor: default !important;
}

.Listing .CurrentListing, .Listing .CurrentListing:hover {
	color: var(--listing_current_color);
	background: var(--listing_current_background);
}

.ModuleListing {
	padding: 10px 15px;
}
/* LISTING */

/* FEATURED NEWS */
.FeaturedNewsContainer {
	gap: var(--spacing);
}

.FeaturedNews {
	flex: 1;
}

.FeaturedNews .VideoContainer {
	padding: 0;
	min-width: 100%;
	display: none;
	float: left;
}

.FeaturedNews .FeaturedNewsShow {
	display: flex;
}

.FeaturedNews .Thumb img {
	aspect-ratio: 1280 / 540;
}

.FeaturedNews .Link {
	font-size: 1.4rem;
}

.FeaturedNewsList {
	width: 22%;
	/*max-width: 200px;*/
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing);
}

.FeaturedNewsList .VideoContainer {
	padding: 0;
	min-width: 100%;
	position: relative;
}

.FeaturedNewsList .VideosContainer {
	gap: var(--spacing);
}

.FeaturedNewsListFrame {
	position: absolute;
	width: 100%;
	height: 100%;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	border: 3px solid var(--link_red);
	border-radius: 4px;
	display: none;
}

.FeaturedNewsSelect .FeaturedNewsListFrame, .FeaturedNewsListItem:hover .FeaturedNewsListFrame {
	display: flex;
	z-index: 10;
	pointer-events: none;
}
/* FEATURED NEWS */

/* HOME PAGE */
.HomePageContainer {
	gap: var(--module_gap);
}

.TopContentContainer {
	--items: 1 !important;
	--gap: 15px !important;
	gap: var(--column_spacing) !important;
}

.TopContentContainer .VideoContainer {
	padding: 0;
	flex-wrap: nowrap;
	flex-basis: 100%;
	min-width: 100%;
}

.TopContentContainer .VideoContainer .FlexContainer {
	width: auto;
	align-content: flex-start;
}

.TopContentContainer .Thumb {
	max-width: 30% !important;
}

.TopContentContainer .ThumbLikes {
	font-size: 1.4rem;
}

.FriendsBrowseContainer {
	gap: var(--spacing) !important;
}

.FriendsBrowse {
	float: left;
	width: 100%;
}
/* HOME PAGE */

/* SHOP */
#ShopContainer {
	width: 100%;
	gap: var(--module_gap);
}

#ShopPayment:empty {
	display: none;
}

.ShoppingCartContainer {
	width: 100%;
	gap: 15px !important;
}

.ShoppingCartItem {
	gap: 15px !important;
}

.ShoppingCartPrice {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.ShopItemsContainer {
	--items: var(--shop_layout);
	--gap: 15px;
	gap: var(--gap);
	align-items: stretch;
}

.ShopItemContainer {
	background: var(--item_background);
	padding: 15px;
	flex-basis: calc(100% / var(--items) - 30px - var(--gap) / var(--items) * (var(--items) - 1));
	min-width: calc(100% / var(--items) - 30px - var(--gap) / var(--items) * (var(--items) - 1));
	display: flex;	
	gap: 10px;
	flex-wrap: wrap;
	align-content: flex-start;
	border-radius: var(--border_radius);
}

.DiscountPrice {
	font-weight: bold;
	color: var(--shop_price_previous);
	text-decoration: line-through;
}

.ShopNote {
	font-weight: bold;
	color: var(--token_color);
}

.ShopItemContainer .Tokens, .ShopNote, .DiscountPrice {
	width: 100%;
}

.ShopItemImage img {
	aspect-ratio: auto !important;
}

.ShopAlert {
	font-size: 1.4rem;
	color: var(--warning_color);
	line-height: 30px;
}

.ShopAlert .Info {
	color: var(--warning_color);
}

.ShopDiscount {
	position: absolute;
	text-transform: uppercase;
	background: var(--shop_discount_color);
	color: var(--color_fixed_white);
	top: 5px;
	left: 5px;
	font-weight: normal;
	font-size: 0.8rem;
	padding: 2px 4px;
	float: left;
	border-radius: 4px;
	z-index: 1;
}

.ShopBonus {
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
	align-items: center;
}

.ShopBonus span {
	background: var(--shop_bonus_background);
	color: var(--color_fixed_white);
	font-size: 1.0rem;
	padding: 0 8px;
	line-height: 24px;
	border-radius: 12px;
}

.PaymentContainer span {
	flex: 1;
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
	align-items: center;
}

.PaymentContainer span:nth-child(1) {
	max-width: 30%;
}

.Pay {
	display: flex;	
	gap: 10px;
	padding: 15px;
	border-radius: var(--border_radius);
	background: var(--pay_background);
	flex-wrap: wrap;
	width: calc(100% - 30px);
}

.Pay p {
	color: var(--color_fixed_black);
}

.Pay a {
	color: var(--color_fixed_black);
}

.Pay a:hover {
	color: var(--color_fixed_black);
}

.PaymentButtons {
	gap: 5px;
}

.PaymentButtons form {
	width: auto;
}
/* SHOP */

/* INFO */
.Pop {
	display: block;
	opacity: 0;
	position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  width: max-content !important;
	max-width: 250px !important;
	background: var(--info_background);
	z-index: 1000 !important;
	padding: 5px 10px !important;
	border-radius: 4px;
	translate: calc(-50%);
	pointer-events: none;
	color: var(--info_color) !important;
	line-height: 1.2rem !important;
	text-align: left;
	font-size: 0.8rem !important;
	font-weight: normal !important;
	white-space: normal;
	transition: 0.3s ease-in-out;
	text-transform: none !important;
	height: auto !important;
}

.Pop::after {
	content: '';
	float: left;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--info_background);
	translate: calc(-50% + 6px);
	position: absolute;
	bottom: -5px;
	left: calc(50% - 6px);
	z-index: 6;
}

.Info {
	display: inline-block !important;
	cursor: pointer;
	position: relative;
	color: var(--color_text);
}

.Info:hover .Pop {
	opacity: 1.0;
}

.Info svg {
	height: 1.1em;
}

.PopContainer {
	position: relative;
}

.PopContainer:hover .Pop {
	transition-delay: 500ms;
	opacity: 1.0;
}
/* INFO */

/* SHOUTBOX */
.Column .Shoutbox {
	flex-direction: column;
}

.Column .Shoutbox .CommentUser img {
	width: 30px;
	height: 30px;
	min-width: 30px;
}

.Column .Shoutbox .CommentUser {
	padding: var(--comment_padding);
	align-items: center;
	min-width: calc(100% - var(--comment_padding) * 2);
}

.Column .Shoutbox .CommentUser .FlexContainer:nth-child(1) {
  min-width: 30px;
  flex-basis: 30px;
}

.Column .Shoutbox .CommentUserDetails {
	flex-wrap: nowrap;
	flex-direction: row;
	gap: 15px;
	align-items: flex-start;
}

/*.Column .Shoutbox .CommentTextContainer {
	padding: 10px;
}*/

#ShoutboxLoad {
	display: none;
}

#ShoutboxUpdate {
	display: none;
}

/*.Column .ShoutboxContainer .ExpandContainer {
	margin-top: -10px;
}*/
/* SHOUTBOX */

/* GUIDE */
.GuideContainer {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--module_gap);
}

.Guide {
	align-content: flex-start;
	width: 75%;
}

.GuideSections {
	width: 25%;
	float: left;
	display: flex;
	gap: 20px;
	flex-direction: column;
}

.GuideSections a {
	display: flex;
	gap: 5px;
}

.GuideSections .ItemContainer {
	padding: var(--item_padding);
	width: calc(100% - var(--item_padding) * 2);
	flex-direction: column;
	gap: 15px;
}

.GuideActive {
	color: var(--link_red);
}

.GuideTitle {
  justify-content: space-between;
  align-items: center;
}

.GuideItem {
	flex-wrap: nowrap;
	gap: 5px;
	align-items: flex-start;
	position: relative;
}

.GuideItem .FlexContainer {
	align-content: flex-start;
	height: 100%;
}

/*.GuideItem p {
	font-size: 0.9rem;
}*/

form .GuideItem {
	gap: 10px;
}

.GuideContainer li::before {
	color: var(--link_red);
}

.GuideContainer img {
	min-width: 20%;
	height: auto;
}

.GuideContainer form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--list_spacing);
}

.GuideContainer .FlexContainer {
	gap: var(--list_spacing);
}

.GuideContainer textarea, .ServerGuide select {
	float: left;
	clear: none;
	background: 0;
	width: 100%;
}

.GuideContainer textarea {
	min-height: 15em;
}

.GuideItem textarea {
	height: calc(100% - 20px - 2px);
}

.GuideContainer .GuideItem .SelectFile {
	width: 20%;
	padding: 0;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	border: 0;
	opacity: 0;
}

/* GUIDE */

/* PLAYING NOW */
.PlayingNow {
	width: 100%;
	display: none;
}

.PlayingNowContainer {
	gap: var(--post_gap);
}

.PlayingNowContainer span {
	display: flex;
	gap: 5px;
}

.PlayingNowContainer .ItemContainer {
	align-items: center;
}

.PlayingNowContainer .ItemContainer span:nth-child(1) {
  min-width: 5%;
  text-align: center;
  padding-right: 10px;
}

.PlayingNowContainer .ItemContainer span:nth-child(2) {
	min-width: 25%;
}

.PlayingNowContainer .ItemContainer span:nth-child(3) {
	min-width: 25%;
}

.PlayingNowContainer .ItemContainer span:nth-child(4) {
	min-width: 20%;
}

.PlayingNowShow {
	display: flex;
}
/* PLAYING NOW */

/* LEADERBOARDS */
#Leaderboards {
	width: 100%;
}

.LeaderboardContainer h3 {
	width: 100%;
}

.LeaderboardPlayers {
	--items: var(--leaderboards_layout);
	--gap: 10px;
	gap: var(--gap);
	align-items: stretch;
}

.LeaderboardPlayer {
	flex: 1;
	flex-basis: calc(100% / var(--items) - 20px - var(--gap) / var(--items) * (var(--items) - 1));
	min-width: calc(100% / var(--items) - 20px - var(--gap) / var(--items) * (var(--items) - 1));
	display: flex;	
	gap: 5px;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	border-radius: var(--border_radius);
	padding: 10px;
}

.LeaderboardPlayer a, .LeaderboardPlayer span {
	max-width: 100%;
	font-size: 0.9rem;
}

.LeaderboardPlayer img {
	height: 30px;
	width: 30px;
	border-radius: var(--avatar_rounded);
}

.LeaderboardItemContainer {
	gap: 5px;
}

.LeaderboardItemContainer span {
	display: flex;
	gap: 5px;
}

.LeaderboardItemContainer .ItemContainer {
	align-items: center;
}

.LeaderboardItemContainer .ItemContainer span:nth-child(1) {
  min-width: 5%;
  text-align: center;
  padding-right: 10px;
}

.LeaderboardItemContainer .ItemContainer span:nth-child(2) {
	min-width: 25%;
}

.LeaderboardItemContainer .ItemContainer span:nth-child(3) {
	min-width: 25%;
}

.MarkedLeaderboard, .MarkedLeaderboard a {
	background: var(--highlight_player_background) !important;
	color: var(--highlight_player_color) !important;
}
/* LEADERBOARDS */

/* COLUMN TABS */
.TabsContainer {
	--tabs: var(--tab_layout);
	--gap: var(--tab_spacing);
	gap: var(--tab_spacing);
	padding: var(--tab_padding);
	width: calc(100% - var(--tab_padding) * 2);
	align-content: flex-start;
}

.TabsContainer h2 {
	text-transform: uppercase;
	padding: 5px;
	font-weight: bold;
	font-size: 1.0rem;
}

.TabItem {
	float: left;
	padding: 10px;
	color: var(--tab_item_color);
	background: var(--tab_item_background);
	width: calc(100% / var(--tabs) - 20px - var(--gap) * (var(--tabs) - 1) / var(--tabs));
	border-radius: 5px;
	font-size: 1.0rem;
	font-weight: normal;
	display: flex;
	gap: 5px;
	align-items: center;
}

.TabItem span {
	display: flex;
	gap: 5px;
}

.MessagesColumnContainer .TabItem span {
	font-weight: bold;
}

.HorizontalTabs .TabItem {
	width: auto;
}

.TabItem:hover {
	background-color: var(--tab_item_background_hover);
	color: var(--tab_item_color_hover);
}

.TabItemActive {
	background-color: var(--tab_item_select_background);
	color: var(--tab_item_select_color);
}

.TabItemActive:hover {
	background-color: var(--tab_item_select_background_hover);
	color: var(--tab_item_select_color_hover);
}
/* COLUMN TABS */

/* USERS */
.UsersContainer {
	--items: var(--users_layout);
	--gap: var(--post_gap);
	gap: var(--post_gap);
	align-items: stretch;
}

.UsersHeader {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 10px;
}

.UsersHeader:nth-of-type(1) {
	margin-top: 0;
}

.Users {
	padding: var(--item_padding);
	/*padding-top: 5px;*/
	width: 0;
	border-radius: 5px;
	transition: 0.3s ease-in-out;
	flex-basis: calc(100% / var(--items) - var(--item_padding) * 2 - var(--gap) / var(--items) * (var(--items) - 1));
	min-width: calc(100% / var(--items) - var(--item_padding) * 2 - var(--gap) / var(--items) * (var(--items) - 1));
	display: flex;
  align-items: center;
  gap: var(--spacing);
}

.Users .AvatarContainer {
	width: auto;
	height: 60px;
	float: left;
	/*margin-right: 10px;*/
	/*margin-top: 10px;*/
	max-height: 5.0vw;
}

.UsersWrap {
	/*margin-top: 10px;
	float: left;	
	clear: none;*/
	display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex-direction: column;
}

.Users strong, .Users small {
	float: left;
	clear: both;
	line-height: 20px;
}

.Users strong {
	font-size: 1.0rem;
	color: var(--color_black);
}

.Users svg {
	margin-right: 5px;
}

.Users small {
	font-size: 0.9rem;
	font-weight: normal;
	color: var(--stats_color);
}
/* USERS */

/* LOTTERY */
.LotteryInformation {
	font-size: 0.85rem;
	font-style: italic;
	margin-left: 5px;
}

.LotteryTickets {
	--items: var(--lottery_layout);
	--gap: var(--post_gap);
	gap: var(--post_gap);
	align-items: stretch;
}

.LotteryTicket {
	background: var(--item_background);
	padding: 0;
	flex: 1;
	flex-basis: calc(100% / var(--items) - var(--gap) / var(--items) * (var(--items) - 1));
	min-width: calc(100% / var(--items) - var(--gap) / var(--items) * (var(--items) - 1));
	display: flex;	
	gap: 10px;
	flex-wrap: wrap;
	border-radius: var(--border_radius);
	aspect-ratio: 1;
  justify-content: center;
  align-content: center;
}

.LotteryTicket span {
	width: 100%;
	text-align: center;
	font-weight: bold;
}

.LotteryTicket span svg {
	margin-right: 5px;
}

.LotteryPurchased {
	background: 0;
}

.LotteryPurchased a {
	border-radius: var(--border_radius);
	transition: 0.3s ease-in-out;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	gap: 5px;
	flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.LotteryPurchased a {
	color: var(--color_black);
	background: var(--lottery_purchased_background);
}

.LotteryPurchased a:hover {
	color: var(--color_black);
	background: var(--lottery_purchased_background_hover);
}

.LotteryPurchased img {
	width: 50%;
	border-radius: 50%;
}

.LotteryHighlight a, .LotteryHighlight a:hover {
	color: var(--highlight_player_color);
	background: var(--highlight_player_background);
}

/*.LotteryHighlight a:hover {
	color: var(--highlight_player_color);
	background: var(--highlight_player_background_hover);
}
/* LOTTERY */

/* GAMES */
.GamesContainer {
	--items: var(--games_layout) !important;
	--gap: var(--module_gap) !important;
	gap: var(--gap) !important;
}

.GameThumb img {
	aspect-ratio: 1 !important;
}

.Column .GameThumb {
	max-width: 100px;
}

.GameCover {
	width: 100%;
	text-align: center;
}

.GameCover img {
	max-width: 60%;
}

.GameInformation {
	flex-wrap: wrap;
	gap: 10px;
	padding: var(--item_padding);
	width: calc(100% - var(--item_padding) * 2);
}

.GameInformation p {
	width: 100%;
	float: left;
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
}

.GameInformation p span {
	min-width: 35%;
}

.GameInformationStats p span {
	min-width: 50%;
}
/* GAMES */

/* RATING */
.RatingContainer {
	float: left;
	clear: both;
	width: 100%;
}

.RatingContainer h4 {
	float: left;
	color: var(--color_text);
	clear: none;
	font-weight: normal;
	line-height: 30px;
	margin: 0;
}

.Rating {
	float: left;
	width: 150px;
	position: relative;
	height: 30px;
}

.Rating span {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	float: left;
	color: transparent;
}

.Rating .Stars {
	color: var(--star_color);
	z-index: 1;
}

.Rating span:nth-child(2) {
	z-index: 6;
}

.Rating span:nth-child(3) {
	z-index: 5;
}

.Rating span:nth-child(4) {
	z-index: 4;
}

.Rating span:nth-child(5) {
	z-index: 3;
}

.Rating span:nth-child(6) {
	z-index: 2;
}

.Rating span:hover, .Rating .Rated, .CommentRating {
	color: var(--star_color_hover);
}

.Rating svg {
	width: 30px;
	height: 30px;
}

.CommentRating {
	float: left;
	width: 100%;
	margin-bottom: 10px;
}

.CommentRating svg {
	float: left;
}
/* RATING */

/* UPLOAD VIDEO */
.UploadContainer {
	flex-wrap: nowrap;
	gap: 15px;
	align-items: flex-start;
}

.UploadPreview {
	max-width: calc(100% / 3);
	align-items: flex-start;
}

.UploadPreview img {
	border: 10px solid var(--upload_preview_border);
	width: calc(100% - 20px);
}

.UploadTagsContainer {
	--gap: 5px;
	gap: var(--gap);
}

.UploadBarContainer {
	float: left;
	width: 100%;
	display: none;
	gap: 10px;
	flex-wrap: wrap;
}

.UploadBarContainer p {
	font-weight: bold;
}

.UploadBarContainer strong {
	color:var(--upload_color);
}

.UploadBarDetails {
	width: 100%;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.UploadBar {
	float: left;
	border: 1px solid var(--form_border);
	border-radius: 4px;
	width: 100%;
	padding: 2px;
}

.UploadBar span {
	float: left;
	width: 0%;
	background: var(--upload_bar_background);
	height: 26px;
	border-radius: 2px;
}
/* UPLOAD VIDEO */

/* GAME ITEM */
.GameItem {
	float: left;
	clear: both;
	width: 100%;
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
	align-items: center;
}

.GameItem img {
	width: 30px;
	height: 30px;
	min-width: 30px;
	border-radius: 50%;
	float: left;
}

.GameItem .GameLink {
	float: left;
	clear: none;
	width: auto;
}

.GameLink {
	color: var(--link_red);
	/*transition: 0.3s ease-in-out;*/
}

.GameLink:hover {
	color: var(--link_red_hover);
}

.BaseColumn .GameItem {
	flex-wrap: nowrap;
	align-items: center;
	/*padding: 10px;*/
	gap: 10px;
}

.BaseColumn .GameItem .GameLink {
	font-size: 0.9rem;
	line-height: normal;
}
/* GAME ITEM */

/* USER ITEM */
.UserItem {
	float: left;
	clear: both;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
}

.UserItem img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	float: left;
	min-width: 30px;
}

.UserItem .BlankLink {
	color: var(--color_black);
	font-weight: bold;
}

.UserItem .Link {
	float: left;
	clear: none;
	width: auto;
	line-height: 30px;
}

.UserItem span {
	display: flex;
	gap: 5px;
	flex-wrap: nowrap;
	align-items: center;
}

.UserItem img, .UserItem span:first-child {
	flex-shrink: 0 !important;
}

.UserItem .Stats {
	width: auto;
}

.InsertUserItem {
	width: auto !important;
	display: inline-flex !important;
	float: none !important;
	clear: none !important;
	translate: 0 0.6rem;
	margin-top: -0.35rem !important;
  margin-bottom: 0.75rem !important;
  padding: 0 5px;
}
/* USER ITEM */

/* DOWNLOAD */
.DownloadsContainer {
	--items: var(--downloads_layout);
	--gap: var(--module_gap);
	gap: var(--gap);
	align-items: stretch;
}

.DownloadContainer {
	background: var(--background);
	padding: var(--container_padding);
	flex-basis: calc(100% / var(--items) - var(--container_padding) * 2 - var(--gap) / var(--items) * (var(--items) - 1));
	min-width: calc(100% / var(--items) - var(--container_padding) * 2 - var(--gap) / var(--items) * (var(--items) - 1));
	display: flex;	
	gap: var(--spacing);
	flex-wrap: wrap;
	align-content: flex-start;
	border-radius: var(--border_radius);
}

.DownloadContainer .Thumb {
	max-width: 25%;
}

.DownloadDetails {
	align-content: flex-start;
}

.DownloadDetails h3 {
	width: 100%;
}

.DownloadDetails span {
	display: flex;
	width: 100%;
	gap: 5px;
}

.DownloadContainer .ItemContainer {
	flex-wrap: wrap;
	gap: var(--list_spacing);
}

.DownloadContainer .ItemContainer h3 {
	display: flex;
	gap: 5px;
	font-size: 0.9rem;
	font-weight: bold;
	width: 100%;
}

.DownloadContainer .ItemContainer span {
	font-size: 0.9rem;
	width: 100%;
}

.DownloadContainer .ItemContainer small {
	font-size: 0.9rem;
}

.DownloadContainer .ItemContainer small a svg {
	margin-right: 5px;
}
/* DOWNLOAD */

/* GAME SERVERS */
.GameServersContainer {
	--items: 1;
	--gap: var(--module_gap);
	gap: var(--gap);
	align-items: stretch;
}

.GameServerContainer {
	background: var(--background);
	padding: var(--container_padding);
	flex-basis: calc(100% / var(--items) - var(--container_padding) * 2 - var(--gap) / var(--items) * (var(--items) - 1));
	min-width: calc(100% / var(--items) - var(--container_padding) * 2 - var(--gap) / var(--items) * (var(--items) - 1));
	display: flex;	
	gap: var(--spacing);
	flex-wrap: nowrap;
	align-content: flex-start;
	border-radius: var(--border_radius);
}

.GameServerContainer .Thumb {
	height: 100%;
  width: auto;
}

.GameServerContainer .ThumbImage img {
	max-width: 8rem;
}

.GameServerDetails {
	align-content: flex-start;
	flex-wrap: nowrap;
}

.GameServerDetails .FlexContainer {
	align-content: flex-start;
}

.GameServerDetails .ItemContainer {
	flex-direction: column;
}

.GameServerDetails .Stats {
	font-size: 1.5rem;
	color: var(--color_text);
}

.GameServerContainer .ItemContainer {
	flex-wrap: wrap;
	align-content: flex-start;
	gap: var(--item_spacing);
}

.GameServerDetails .ItemContainer .FlexContainer {
	gap: 5px;
	flex-direction: column;
	align-items: flex-start;
}

.GameServerContainer .ItemContainer h3 {
	display: flex;
	gap: 5px;
	font-size: 0.9rem;
	font-weight: bold;
}

.GameServerContainer .ItemContainer span {
	font-size: 0.9rem;
}

.GameServerGuide .ItemContainer {
	flex-wrap: wrap;
	display: flex;
	gap: 15px;
}

.GameServerGuide .ItemContainer h3 {
	font-weight: bold;
}

.ServerBonusContainer {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.ServerBonusContainer p {
	width: auto;
}

.ServerBonus {
	background: var(--bonus_background);
	color: var(--color_fixed_black);
	/*border-radius: 0.6rem;
	padding: 0 0.5rem;
	min-height: 20px;
	line-height: 1.2rem;
	font-size: 0.9rem;*/
	width: auto !important;
	gap: 0 !important;

  border-radius: 12px;
  padding: 0 12px;
  min-height: 24px;
  line-height: 24px;
  font-size: 0.8rem;
  font-weight: bold;
}

.ServerBonus svg {
	margin-right: 5px;
}
/* GAME SERVERS */

/* WARNING */
.WarningContainer {
	margin-top: 10px;
}

.Warning {
	color: var(--color_gray_2);
	gap: 0 !important;
	display: flex;
}

.Warning span {
	display: inline;
}

.Warning strong {
	color: var(--color_black);
}

.Warning svg {
	color: var(--hint_color);
	margin-right: 5px;
}

.WarningText {
	gap: 0 !important;
}

.WarningText svg {
	color: var(--hint_color);
	margin-right: 5px;
}
/* WARNING */

/* NOTE */
.Note {
	gap: 0 !important;
	display: flex;
	color: var(--color_gray_2);
}

.Note strong {
	color: var(--color_black);
}

.Note svg {
	color: var(--note_color);
	margin-right: 5px;
}
/* NOTE */

/* HINT */
.Hint {
	color: var(--color_gray_2);
	gap: 0 !important;
	display: flex;
}

.Hint strong {
	color: var(--color_black);
}

.Hint svg {
	color: var(--hint_color);
	margin-right: 5px;
}
/* HINT */

/* THUMB */
.Thumb {
	float: left;
  vertical-align: middle;
  z-index: 1;
  width: 100%;
  display: inline;
  min-width: 60px;
  _border: 5px solid var(--thumb_border);
  _border-radius: 5px;
}

.Thumb:hover {
	text-decoration: none;
	_border-color: var(--thumb_border_hover);
}

.Thumb a {
	float: left;
	width: 100%;
	position: relative;
	border-radius: 4px;
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	_width: calc(100% - 10px);
	_border-radius: 5px;
	_border: 5px solid hsl(210 50% 80% / 1);
}

.Thumb:hover a {
	_border-color: hsl(210 50% 85% / 1);
}

.Thumb:hover .ThumbImage img {
	transform: scale(1.1);
}

.ThumbImage {
  overflow: hidden;
  width: 100%;
}

.ThumbLikes {
	background: var(--thumb_likes_background);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color_fixed_white);
	gap: 5px;
	min-width: calc(100% / 3);
	font-size: 1.2rem;
}

.ThumbLikes svg {
	flex-shrink: 0;
}

.Thumb img {
	transition: 0.3s ease-in-out;
	width: 100%;
	aspect-ratio: 16 / 9;
	float: left;
}

.ThumbIcon {
	position: absolute;
	width: 20px;
	height: 20px;
	bottom: 5px;
	right: 5px;
	color: var(--color_fixed_white);
	justify-content: center;
	display: flex;
	align-items: center;
	border-radius: 4px;
	z-index: 1;
}

.ThumbIcon svg {
	height: 80%;
}

.VideoIcon {
	background: var(--video_icon_color);
}

.QuizIcon {
	background: var(--quiz_icon_color);
}

.ScreenshotIcon {
	background: var(--screenshot_icon_color);
}

.PollIcon {
	background: var(--poll_icon_color);
}

.NewsIcon {
	background: var(--news_icon_color);
}

.GameIcon {
	background: var(--game_icon_color);
}

.ServerIcon {
	background: var(--server_icon_color);
}

.BlogIcon {
	background: var(--blog_icon_color);
}

.SearchHeaderIcon {
	background: var(--search_counter_background);
}

.ContestIcon {
	background: var(--contest_icon_color);
}

.New {
	color: var(--new_background);
}

.NewIcon {
	left: 5px;
	top: 5px;
	bottom: auto;
	right: auto;
	background: var(--new_background);
}

.Remaining, .Length {
	position: absolute;
	text-transform: uppercase;
	background: var(--video_length_background);
	top: 5px;
	right: 5px;
	color: var(--video_length_color);
	font-weight: normal;
	font-size: 0.8rem;
	padding: 0 5px;
	height: 20px;
	line-height: 20px;
	float: left;
	border-radius: 4px;
	z-index: 1;
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
	align-items: center;
}
/* THUMB */

/* VIDEOS */
.VideosContainer {
	--items: var(--videos_layout);
	--gap: var(--module_gap);
	--video_padding: 15px;
	gap: var(--module_gap);
	align-items: stretch;
	max-width: 100%;
}

.VideoContainer {
	padding: var(--video_padding);
	background: var(--background);
	border-radius: var(--border_radius);
	flex-basis: calc(100% / var(--items) - var(--video_padding) * 2 - var(--gap) / var(--items) * (var(--items) - 1));
	min-width: calc(100% / var(--items) - var(--video_padding) * 2 - var(--gap) / var(--items) * (var(--items) - 1));
	display: flex;	
	gap: var(--spacing);
	flex-wrap: wrap;
	align-content: flex-start;
	max-width: 100%;
}

.GameContentContainer .VideosContainer {
	--items: 4;
}

.BrowseContainer .VideoContainer {
	--video_padding: 0px;
	padding: var(--video_padding);
}

.Column .VideoContainer {
	float: left;
	background: 0;
	padding: 0;
	flex-wrap: nowrap;
	gap: var(--spacing);
	width: 100%;
}

.Column .VideoContainer .FlexContainer:nth-of-type(1) {
	flex-basis: calc(100% / 3);
	/*min-width: 35%;*/
	max-width: 200px;
}

.Column .VideoContainer .FlexContainer:nth-of-type(2) {
	align-content: flex-start;
	flex-wrap: wrap;
	flex: 1;
}

.Column .VideoContainer .FlexContainer:nth-of-type(2) .Link {
	flex-basis: 100%;
}

.Column .ServerContainer .FlexContainer:nth-of-type(1) {
	width: auto;
	min-width: auto;
	max-width: 100px;
}

.Column .ServerContainer .Stats {
	font-size: 1.5rem;
	color: var(--color_text);
}

.Column .ServerContainer .Stats span:nth-of-type(1) {
	align-self: flex-start;
}

.Column .VideoContainer .GameItem {
	width: auto;
	padding: 0;
}

.Column .VideoContainer .Thumb {
	width: 100%;
}

.Column .VideoContainer .GameItem .GameLink {
	line-height: 30px;
}

.VideoCategoryContainer {
	flex-wrap: nowrap;
	width: 100% !important;
	gap: 30px;
}

.VideoCategoryContainer .GameItem, .VideoCategoryContainer .UserItem {
	width: auto;
}
/* VIDEOS */

/* PROMOTE */
.PromoteContainer .PromoteIcon {
	flex-basis: 0;
	font-size: 1.875rem;
	min-width: 3.125rem;
	min-height: 3.125rem;
	border-radius: 50%;
	background: var(--promote_background);
	color: var(--color_fixed_white);
	display: flex;
  align-items: center;
  justify-content: center;
}

.PromoteContainer .PromoteIcon svg {
	float: left;
}

.PromoteContainer .FlexContainer {
	gap: var(--post_gap);
}

.PromoteContainer .ItemContainer {
	align-items: center;
	gap: 10px;
}
/* PROMOTE */

/* ANNOUNCEMENT */
.AnnouncementContainer {
	background: var(--alert_background);
}

.AnnouncementText, .AnnouncementText span {
	color: var(--color_fixed_white) !important;
	font-size: 1.0rem;
}

.AnnouncementContainer h2, .AnnouncementContainer a {
	color: var(--color_fixed_white);
}

.AnnouncementContainer a:hover {
	color: var(--alert_link_color_hover);
}
/* ANNOUNCEMENT */

/* HIGHLIGHT */
.HighlightVideosContainer {
	--items: 30;
	--show: var(--videos_layout);
	--counter: calc(var(--items) / var(--show));
	--gap: var(--module_gap);
	width: calc(100% * var(--counter) + var(--gap) * (var(--counter) - 1));
	flex-wrap: nowrap;
	position: relative;
	top: 0;
	left: 0;
	max-width: calc(100% * var(--counter) + var(--gap) * (var(--counter) - 1));
}

.FeaturedVideos {
	--items: 3;
	--show: 3;
	--video_padding: 0px;
	padding: var(--container_padding);
}

.FeaturedContests {
	--items: 9;
	--show: 3;
	--video_padding: 0px;
}

.HighlightContainer {
	background: var(--highlight_background);
	width: 100%;
	padding: 0;
}

.HighlightVideosContainer .HighlightContainer {
	background: 0;
}

.Column .HighlightContainer {
	gap: 0;
}

.HighlightContainer .ColumnItems {
	padding: var(--highlight_padding);
}

.HighlightContainer a {
	color: var(--color_fixed_white);
	max-width: 100%;
}

.HighlightContainer a:hover {
	color: var(--alert_link_color_hover); 
}

.HighlightContainer .GameItem a {
	color: var(--highlight_link_color);
}

.HighlightContainer .GameItem a:hover {
	color: var(--highlight_link_color_hover);
}

.HighlightContainer h2 {
	padding: var(--highlight_header_padding);
	background: var(--highlight_header) !important;
	color: var(--color_fixed_white);
	border-top-left-radius: var(--border_radius);
	border-top-right-radius: var(--border_radius);
}

.HighlightContainer .Stats {
	color: var(--highlight_stats_color);
}

.BrowseHighlightContainer {
	background: 0;
	padding: 0;
	width: 100%;
	gap: 0;
	background: var(--highlight_background);
	border-radius: var(--border_radius);
}

.BrowseHighlightContainer h2 {
	background: var(--highlight_header) !important;
	color: var(--color_fixed_white);
	padding: var(--highlight_header_padding);
	border-top-left-radius: var(--border_radius);
	border-top-right-radius: var(--border_radius);
}

.BrowseHighlightHide {
	overflow: hidden;
	width: calc(100% - 100px);
  margin-left: 50px;
}

.BrowseHighlight {
	margin-left: calc(var(--container_padding) * -1);
	width: 100%;
	padding: var(--container_padding);
	float: left;
}

.BrowseHighlight .VideosContainer {
	--video_padding: 0 !important;
}

.BrowseHighlight .HighlightContainer {
	background: 0;
}

.BrowseArrow {
	position: absolute;
	display: block;
	padding: 10px 0 !important;
	color: var(--link_red) !important;
	background: var(--button_white_background);
}

.BrowseArrow:hover {
	background-color: var(--button_white_background_hover) !important;
	color: var(--link_red) !important;
}

.BrowseArrow svg {
	float: left;
	height: 100%;
}

.BrowsePrevious {
	top: 50%;
	left: 0;
	transform: translate(calc(-100% + 40px), -50%);
}

.Screenshot .BrowsePrevious {
	transform: translate(calc(10px), -50%);
}

.BrowseNext {
	top: 50%;
	right: 0;
	transform: translate(calc(100% - 40px), -50%);
}

.Screenshot .BrowseNext {
	transform: translate(calc(-10px), -50%);
}

.Column .HighlightVideoContainer {
	gap: 15px;
}
/* HIGHLIGHT */

/* BLOGS */
.BlogPostContainer h2 {
	text-transform: none;
}

.LastBlogPost {
	display: flex;
	flex-wrap: wrap;
}

.LastBlogPost small {
	min-width: 100%;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0.7rem;
	color: var(--color_gray_3);
}

.LastBlogPost a {
	text-decoration: underline;
}

.BlogContributors .UserItem span {
	gap: 10px;
}

.BlogContributors img {
	width: 60px;
	height: 60px;
}

.BlogPost {
	line-height: 1.5em;
}
/* BLOGS */

/* MEDIA */
.MediaHeader {
	line-height: normal;
	float: left;
	flex-basis: calc(100% - var(--container_padding) * 2);
	min-width: calc(100% - var(--container_padding) * 2);
	position: relative;
	border-radius: 5px;
	flex: 1;
	padding: var(--container_padding);
	background: var(--background);
	display: flex;
	gap: 10px;
}

.MediaHeaderDark {
	background: var(--filter_dark_background);
	color: var(--filter_dark_color);
	--form_color: var(--filter_dark_color);
}

.MediaHeader .FlexContainer {
	align-content: center;
	gap: 0;
}

.MediaHeaderTitle {
	gap: 5px !important;
}

.MediaHeader img {
	width: auto;
	height: 60px;
	border-radius: 50%;
	float: left;
}

.MediaHeader h2 {
	font-size: 2.0rem;
	font-weight: bold;
	margin: 0;
	text-transform: none;
}

.MediaHeader .Button {
	height: 60px;
	width: 60px;
	min-width: 60px;
}

.MediaHeaderButtons {
	width: auto;
	gap: 10px !important;
	flex-wrap: nowrap;
}

.MediaHeaderIcon {
	float: left;
	width: 60px;
	height: 60px;
	min-width: 60px;
	color: var(--color_fixed_white);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.MediaHeaderIcon svg {
	float: left;
	height: 80%;
}

.MediaPlayer {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--media_background);
	z-index: 2;
	text-align: center;
	position: relative;
	border-radius: var(--border_radius);
	overflow: hidden;
}

.MediaPlayer img {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.MediaContainer .MediaStats {
	width: auto;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 1.1rem;
}

.MediaTagsButtons {
	justify-content: space-between;
}

.MediaTags, .MediaButtons {
	width: auto;
	gap: 5px !important;
}

.MediaButtons {
	margin-left: auto;
}

.MediaTags:empty, .MediaButtons:empty {
	display: none !important;
}

.MediaTagsButtons:has(.MediaTags:empty):has(.MediaButtons:empty):not(:has(.AdvertisementContainer)) {
	display: none !important;
}

.MediaTagsButtonsContainer:has(.MediaTags:empty):has(.MediaButtons:empty):has(.MediaDescription:empty):not(:has(.AdvertisementContainer)): {
	display: none !important;
}

.MediaDescription {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}

.MediaDescription:empty {
	display: none;
}

.MediaDescriptionLink {
	line-height: 30px;
}

.MediaTag {
	font-size: 0.9rem;
	background: var(--media_tag_background);
	color: var(--media_tag_color);
  float: left;
  border-radius: 15px;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
}

.MediaTag:hover {
	background: var(--media_tag_background_hover);
	color: var(--media_tag_color);
}

.ForumTag {
	font-size: 0.7rem;
	background: var(--forum_tag_background);
	color: var(--forum_tag_color);
  float: left;
  border-radius: 0.6rem;
  padding: 0 8px;
  height: 1.2rem;
  line-height: 1.2rem;
  font-weight: bold;
}

.TagGreen {
	background: var(--forum_tag_green);
	color: var(--color_fixed_black);
}

.TagYellow {
	background: var(--forum_tag_yellow);
	color: var(--color_fixed_black);
}

.TagRed {
	background: var(--forum_tag_red);
	color: var(--color_fixed_black);
}

.TagPink {
	background: var(--forum_tag_pink);
	color: var(--color_fixed_black);
}

.TagBlue {
	background: var(--forum_tag_blue);
	color: var(--color_fixed_black);
}

.TagPurple {
	background: var(--forum_tag_purple);
	color: var(--color_fixed_black);
}

.Screenshot {
	width: 100%;
	float: left;
	clear: both;
	text-align: center;
	background: var(--media_background);
	position: relative;
	border-radius: var(--border_radius);
	overflow: hidden;
	display: flex;
  justify-content: center;
}

.Screenshot img {
	float: left;
	max-width: 100%;
	max-height: 540px;
}

.NewsCover {
	width: 100%;
	float: left;
	clear: both;
	text-align: center;
	background: var(--media_background);
	border-radius: var(--border_radius);
	overflow: hidden;
}

.NewsCover img {
	float: left;
	width: 100%;
}
/* MEDIA */

/* POLLS */
#PollContainer {
	gap: var(--module_gap);
}

.PollContainer h2 {
	margin-bottom: 0;
}

.PollContainer .Description {
	float: left;
	clear: both;
	width: 100%;
	color: var(--color_text);
}

.PollContainer img {
	max-width: 100%;
}

.PollOptionContainer {
	float: left;
	width: calc(100% - var(--container_padding) * 2);
	padding: var(--container_padding);
	border-radius: var(--border_radius);
	background: var(--background);
}

.PollOptionContainer .Button {
	margin: 0;
}

.PollOptionContainer p {
	font-size: 1.0rem;
	color: var(--color_text);
	display: flex;
	align-items: center;
	padding: 10px;
	background: var(--item_background);
	flex: 1;
	border-radius: var(--border_radius);
}

.PollOption {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: var(--item_gap);
}

.PollOptionUsers {
	float: left;
	clear: none;
	width: calc(100% - 30px);
	padding: 15px;
	background: var(--item_background);
	border-radius: var(--border_radius);
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	gap: 5px;
	margin-top: var(--item_gap);
}

.PollOptionUser {
	position: relative;
}

.PollOptionUser:hover .Pop {
	opacity: 1.0;
}

.PollOptionUser img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	float: left;
}

.PollsListContainer {
	--items: var(--polls_layout);
  --gap: var(--item_gap);
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: var(--item_gap);
}

.PollsList {
	padding: 15px;
	background: var(--item_background);
	border-radius: var(--border_radius);
	flex: 1;
	flex-basis: calc(100% / var(--items) - 30px - var(--gap) / var(--items) * (var(--items) - 1));
	flex-wrap: nowrap;
}

.PollsList .Thumb {
	max-width: 20%;
}

.PollsList .FlexContainer {
	width: auto;
	align-content: flex-start;
}

.PollsList h3 {
	width: 100%;
}

.PollsListCategory {
	flex-wrap: nowrap;
	gap: 30px;
}

.PollsListCategory .GameItem {
	width: auto;
}
/* POLLS */

/* TMP */
.ErrorContainer {
	display: flex;
}

.ErrorContainer h2 {
	font-size: 2rem;
	font-weight: bold;
	line-height: 4rem;
}

.ErrorContainer p {
	font-size: 1.4rem;
	padding: 15px;
	background: var(--item_background);
	border-radius: var(--border_radius);
	display: flex;
	gap: 5px;
	flex-direction: column;
}

.ErrorContainer img {
	margin: auto;
	float: none;
	display: block;
}
/* TMP */

/* ADMINISTRATION */
.AdministrationPageWrap {
	margin-left: calc(20%);
}

.AdministrationFilterContainer {
	position: fixed;
	background: var(--background);
  width: calc(20% - var(--tab_padding) * 2);
  max-width: calc(20% - var(--tab_padding) * 2);
  left: 0;
  top: var(--header_height);
  padding: var(--tab_padding);
  float: left;
}

.AdministrationFilterList {
	overflow-y: auto;
  overflow-x: hidden;
	height: calc(100svh - var(--header_height) - 30px);
}

.AdministrationFilterSpacing {
	padding-bottom: calc(var(--messages_height) + var(--tab_padding));
	display: flex;
  flex-wrap: wrap;
  gap: var(--tab_spacing);
}

.AdministrationContent {
	padding-bottom: var(--messages_height);
}

.AdministrationContent {
	margin-left: auto;
}

.AdministrationFilter {
	display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-content: flex-start;
  width: 100%;
}

.AdministrationFilter .TabItem {
	justify-content: space-between;
	width: 100%;
}

.AdministrationSection {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: var(--tab_spacing);
}

.AdministrationSection .TabItem {
	padding-left: calc(1.1em + 5px + 10px);
	width: calc(100% - (1.1em + 5px + 10px + 10px));
}

.AlertContainer {
	background: var(--alert_background);
	padding: 15px;
	border-radius: var(--border_radius);
	display: flex;
	flex-wrap: wrap;
	width: calc(100% - 30px);
	gap: 5px;
}

.AlertContainer p, .AlertContainer p a {
	color: var(--color_fixed_white);
}

.AlertContainer p a:hover {
	color: var(--alert_link_color_hover);
}

.AlertContainer p {
	width: auto;
}

.AlertContainer p svg {
	margin-right: 5px;
}

.AlertContainer .FlexContainer {
	height: 30px;
	align-items: center;
}

.AlertContainer .FlexContainer:empty {
	display: none;
}

.AlertContainer .Button {
	height: 24px;
	width: 24px;
	min-width: 24px;
}

.Loading {
	float: left;
	width: 100%;
	display: flex;
	align-items: center;
  justify-content: center;
  color: var(--color_black);
}

.Loading span {
	margin-top: 15px;
	padding: 5rem;
	display: flex;
	height: 8rem;
	width: 8rem;
}

.Loading svg { 
	display: block;
	width: 100%;
	height: 100%;
}

.AdminSettings {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.AdminSettings:empty {
	display: none;
}

/*.InvertAdminSettings:empty {
	display: none;
}

.InvertAdminSettings {
	display: flex;
	gap: inherit;
  flex-direction: row-reverse;
}*/

.AdminFilter {
	position: relative;
	min-width: 12rem;
}

.AdminFilterInput {
	float: left;
	height: 28px;
	line-height: 28px;
	padding: 0 6px 0 10px;
	font-size: 0.8rem;
	border: 1px solid var(--form_border);
	background: var(--form_background);
	color: var(--form_color);
	font-style: normal;
	cursor: pointer;
	border-radius: var(--input_border_radius);
	width: calc(100% - 20px);
	display: flex;
  justify-content: space-between;
  align-items: center;
}

.AdminFilterInput svg {
	height: 75%;
  margin-left: 5px;
}

.AdminSettings .Search {
	width: auto;
	min-width: 12rem;
	margin-left: auto;
}

.Admin {
	float: left;
	width: 100%;
	display: flex;
	gap: 5px;
	flex-direction: column;
}

.Admin h2 {
	display: flex;
	align-items: center;
}

.Admin p {
	width: calc(100% - 20px);
	padding: 10px;
	line-height: normal;
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	align-items: center;
	background: var(--item_background);
	border-radius: var(--border_radius);
}

/*.Admin p:nth-of-type(odd) {
	background: var(--item_background);
}*/

.Admin p span {
	flex-grow: 1;
	display: flex;
	/*float: left;*/
	gap: 10px;
	word-break: break-word;
	align-items: center;
}

.Admin p span a svg {
	margin-right: 5px;
}

.Admin p strong {
	color: var(--color_black);
}

.Admin .Warning {
	width: 100%;
}

.AdminHeader {
	background: var(--color_fixed_black) !important;
	color: var(--color_fixed_white);
}

.Admin .Completed, .Admin .Completed:hover, .AdminButtons .Completed, .AdminButtons .Completed:hover {
	background: var(--button_red_background_completed) !important;
	color: var(--color_fixed_black) !important;
}

.Admin .Loaded, .Admin .Loaded:hover, .AdminButtons .Loaded, .AdminButtons .Loaded:hover {
	background: var(--button_red_background_completed) !important;
	color: var(--color_fixed_black) !important;
}

.Delta {
	display: flex;
  align-items: center;
  justify-content: center;
  color: var(--delta_up);
  width: 12px;
}

.IconContainer, .Delta {
  word-break: keep-all !important;
}

.Admin .DeltaHidden {
	visibility: hidden !important;
}

.Delta svg {
	height: calc(1.1rem + 0.6rem);
  margin: -0.3rem 0;
}

.Down {
	color: var(--delta_down);
}

.Down svg {
	transform: rotate(180deg);
}

.Admin .CommentRating {
	width: auto;
	display: flex;
  justify-content: flex-start;
  flex: 0;
  gap: 0;
  margin: 0;
}

.Admin .CommentRating:hover .Pop {
	opacity: 1;
}

.AdminStats {
	display: flex;
	flex-wrap: nowrap;
	gap: 5px !important;
	width: 100%;
}

.AdminStats svg {
	height: 1.1rem !important;
	margin: 0 !important;
}

.FlagContainer {
	gap: 10px !important;
	align-items: center;
}

.Flag {
	--flag_size: calc(923 / 604.72);
	float: left;
	clear: none;
	height: 30px;
	position: relative;
	display: flex;
  align-items: center;
	flex-shrink: 0;
}

.Flag img {
	float: left;
	height: calc(30px * var(--flag_size));
	margin-top: calc(var(--flag_size) * -0.5);
}

.Flag:hover strong, .AdminRating:hover strong {
	opacity: 1;
}

.Flag strong, .AdminRating strong {
	opacity: 0; position:
	absolute;
	text-align: center;
	z-index: 9;
}

.Flag strong::after, .AdminRating strong::after {
	content: '';
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--info_background);
	transform: translate(-50%, 0);
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 10;
}

.Flag strong small, .AdminRating strong small {
	display: inline-block;
	padding: 5px 10px;
	background: var(--info_background);
	color: var(--info_color);
	border-radius: 4px;
	font-style: normal;
	font-weight: normal;
	font-size: 0.9rem;
}

.Flag strong:hover small, .AdminRating strong:hover small {
	display: none;
}

.Flag strong:hover, .AdminRating strong:hover {
	background: 0;
	cursor: default;
}

.Flag strong {
	left: -150px;
	width: calc(300px + 100%);
	bottom: 35px;
	pointer-events: none;
	transition: 0.3s ease-in-out;
}

.AdminRating strong {
	width: 600%;
	left: -250%;
	bottom: 15px;
}

.AdminWarning, .AdminWarning:hover {
	color: var(--color_black);
	font-weight: bold;
	display: flex;
	gap: 5px !important;
}

.AdminWarning svg {
	color: var(--warning_color);
	margin: 0 !important;
}

.AdminWarningDefault, .AdminWarningDefault:hover {
	display: flex;
	gap: 5px !important;
	justify-content: flex-end;
	width: 100%;
}

.AdminWarningDefault svg {
	color: var(--warning_color);
	margin: 0 !important;
}

.CheckLinkContainer {
	padding: 0 !important;
	display: flex;
  flex-wrap: wrap;
  gap: 5px !important;
}

.CheckLink {
	width: 30px;
	height: 30px;
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	line-height: 30px;
	border-radius: 4px;
	font-size: 0.8rem;
}

.SupportMessageContainer {
	flex-wrap: wrap;
	gap: 2px;
	padding: 2px;
	width: calc(100% - 4px);
}

.SupportMessageContainer strong {
	color: var(--color_black);
}

.SupportMessageContainer .Stats, .SupportMessageContainer .UserAdmin, .SupportMessageContainer h3 {
	display: flex;
	gap: 5px;
	align-items: center;
	width: auto;
}

.SupportMessageContainer h3 {
	font-size: 1rem;
}

.SupportMessageContainer .UserAdmin {
	font-size: 0.9rem;
}

.SupportMessageUser {
	flex-wrap: nowrap;
	padding: 5px;
}

.SupportMessageItem {
	background: var(--background);
	width: calc(100% - 30px);
	padding: 15px;
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.SupportMessageItem h3 {
	width: 100%;
	font-size: 1.2rem;
	color: var(--color_black);
}

.SupportMessage {
	width: 100%;
}

.SupportMessage:empty {
	display: none;
}

.SupportButtons {
	display: flex;
	gap: 5px;
}

.SupportMessageAttachmentContainer {
	--items: 2;
	--gap: 15px;
	gap: var(--gap);
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.OriginalMessage {
	display: none;
}

.DeletedAttachment {
	color: var(--deleted_color);
}

.DownloadAttachment {
	align-items: center;
}

.SupportMessageAttachmentContainer svg {
	margin-right: 5px;
}

.SupportMessagesContainer {
	gap: 5px;
}

.SupportMessageAttachment {
	flex-basis: calc(100% / var(--items) - var(--gap) / var(--items) * (var(--items) - 1));
	min-width: calc(100% / var(--items) - var(--gap) / var(--items) * (var(--items) - 1));
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-content: flex-start;
	flex-direction: column;
  align-items: flex-start;
}

.SupportMessageAttachment img {
	border-radius: var(--border_radius);
	max-width: 100%;
}
/* ADMINISTRATION */

/* ANIMATIONS */
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.Rotating {
  -webkit-animation: rotating 1s linear infinite;
  -moz-animation: rotating 1s linear infinite;
  -ms-animation: rotating 1s linear infinite;
  -o-animation: rotating 1s linear infinite;
  animation: rotating 1s linear infinite;
}

.DarkMode .Glow, .PurpleMode .Glow, .BlueMode .Glow {
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    filter: drop-shadow(0 0 5px currentColor);
  }
  to {
    filter: drop-shadow(0 0 10px currentColor);
  }
}
/* ANIMATIONS */

/* PERFORMANCE */
.Performance {
	visibility: hidden;
	position: fixed;
	z-index: 4;
	top: calc(60px + 10px);
	right: 15px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	color: #fff;
	padding: 5px 10px;
	font-size: 1.0rem;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.PeformanceThreshold {
	color: #ffaaa8;
}

.Performance span {
	display: flex;
	width: 100%;
	padding: 5px 0;
}

.Performance span svg {
	margin-right: 5px;
}
/* PERFORMANCE */

/* ATRIBUTES */
.Uppercase {
	text-transform: uppercase !important;
}

.Hidden {
	display: none;
}

.Visible {
	visibility: visible;
}

.Right {
	float: right !important;
}

.WidthAuto {
	width: auto !important;
}

.Relative {
	position: relative !important;
}

.Invisible {
	visibility: hidden;
}
/* ATRIBUTES */

/* RESPONSIVE */
@media screen and (max-width: 980px) {
	.NavExpand svg {
		display: none;
	}

	.NavExpand .NavLink {
		padding-right: 12px;
	}
}

@media screen and (max-width: 1200px) {
	body {
		--tab_layout: 3;
		--videos_layout: 2;
		--games_layout: 4;
		--downloads_layout: 1;
		--shop_layout: 3;
		--polls_layout: 1;
		--lottery_layout: 5;
		--invite_layout: 1;
		--leaderboards_layout: 4;
		--users_layout: 3;
		--column_layout: 2;
	}

	/*.ModuleReverse {
		flex-direction: column-reverse;
		justify-content: flex-end;
	}*/

	.MessagesFilterContainer .TabsContainer {
		--tabs: 1;
	}

	.Content, .Column, .TabsContainer, .SearchResults, .Profile, .ProfileTabs {
		width: 100% !important;
	}

	.ProfileTabs .TabsContainer {
		width: calc(100% - var(--tab_padding) * 2) !important;
	}

	.Content, .Column, .HomePageContainer {
		display: contents;
	}

	.MessagesContent {
		display: flex;
	}

	/*.UnreadTopicsContent {
		display: flex;
	}

	.UnreadTopicsColumn {
		display: none;
	}*/

	.AdminSettings .Search {
		margin-left: 0;
	}

	.FeaturedNewsPriority {
		order: -100;
	}

	.AnnouncementPriority {
		order: -99;
	}

	.HomepageServersPriority {
		order: -98;
	}

	.HomePageContainer .BrowseHighlightContainer {
		order: -97;
	}

	.HomePageContainer .FeaturedContests {
		order: -96;
	}

	.Column .ShoutboxContainer {
		order: -95;
	}

	.MediaHeader {
		order: -200;
	}

	.GameDescriptionPriority {
		order: -199;
	}

	.GameInformationPriority {
		order: -198;
	}

	.GameServersPriority {
		order: -197;
	}

	.ServerBonusPriority {
		order: -196;
	}

	.ServerStatsPriority {
		order: -195;
	}

	.ServerGuidePriority {
		order: -194;
	}

	.SlotMachinePriority {
		order: -300;
	}

	.SlotMachineLeaderboardPriority: {
		order: -299;
	}

	.QuizPriority {
		order: -300;
	}

	.QuizLeaderboardPriority: {
		order: -299;
	}

	.ProfileHeaderContainer {
		order: -400;
	}

	.ProfileAboutPriority {
		order: -398;
	}
}
/* RESPONSIVE */